设计转前端的个人主页 - 动态

赞了这篇文章

公众号：macrozheng

·

3年前

解放双手！推荐一款阿里开源的低代码工具，YYDS！

之前在我印象中低代码就是通过图形化界面来生成代码而已，其实真正的低代码把它当做一站式开发平台也不为过！最近体验了一把阿里开源的低代码工具，确实是一款面向企业级的低代码解决方...

1.1k

172

关注了

4年前

已经学了一个月前端啦！
现在开始找个有意义的地方做笔记！
之前缺失的内容只能等到复习阶段整理啦！
2021.12.23日
移动端网页特效

1.三个事件:
touchstart/touchmove/touchend
触摸事件对象:TouchEvent

2.三个常见对象列表
touches(触摸屏幕的所有手指列表)/targetTouches（触摸当前DOM元素手指列表)/changedTouches（手指状态发生改变的列表）
*如果侦听的是一个DOM元素，touches和targetTouches是一样的;*
*手指离开屏幕就没有前两个列表，只有changedTouches列表*

*最常用的是targetTouches[0]正在触摸当前元素的第一个手指相关信息如下*
可视区坐标clientX or Y/整个页面坐标pageX or Y/手机屏幕坐标screen...

3.移动端拖动元素
touchstart/touchmove/touchend
事件对象列表targetTouches[0]获取pageX和pageY
element.offsetLeft/Top
element.style.left/top

原理:计算出手指移动的距离给DOM元素（元素原来位置+手指移动距离）
手指移动距离?手指滑动中的位置-手指刚开始触摸的位置

拖动元素三步曲
touchstart:获取手指初始坐标和盒子原来位置
touchmove:计算手指滑动距离，同时把距离赋值给要滑动的盒子
touchend:
*手指移动会触发滚屏，设置阻止默认滚屏e.preventDefault (); *

展开

赞过

1

关注了