黑马程序员技术交流社区
标题: 【郑州校区】移动web开发笔记day2 [打印本页]
作者: 我是楠楠 时间: 2018-1-16 13:55
标题: 【郑州校区】移动web开发笔记day2
本帖最后由 我是楠楠 于 2018-1-16 13:56 编辑
【郑州校区】移动web开发笔记day2
一、Touch事件touchstart：当手指触碰到屏幕的时候触发
绑定事件的方法：dom.addEventListener("touchstart", function(e){});
事件返回的e对象包含那些移动端特有的属性：
targetTouches 目标元素的所有当前触摸
changedTouches 页面上最新更改的所有触摸
touches 页面上的所有触摸
touchmove：当手指在屏幕上滑动时连续触发
绑定事件的方法：dom.addEventListener("touchmove", function(e){});
事件返回的e对象包含那些移动端特有的属性：
originalEvent 是jquery 封装的事件。
targetTouches 目标元素的所有当前触摸
changedTouches 页面上最新更改的所有触摸
touches 页面上的所有触摸
在滑动的时候不断给图片盒子做定位，来达到滑动的效果
定位的位置，当前的图片的定位加上移动的距离
在开始滑动的时候就要清楚定时器，move的时候清除过渡，-index*width + distanceX
touchend：当手指在屏幕上结束滑动时触发
绑定事件的方法：dom.addEventListener("touchend", function(e){});
事件返回的e对象包含那些移动端特有的属性：
changedTouches 页面上最新更改的所有触摸
touchcancel：系统停止跟踪触摸时候会触发，系统被动终止，例如alert。
注意：在touchend事件的时候event只会记录changedtouches
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
二、过渡和动画结束时间1、transitionEnd：过渡结束后触发。
绑定事件的方法：
dom.addEventListener("webkitTransitionEnd", function(e){});
dom.addEventListener("transitionEnd", function(e){});
2、animationEnd：动画结束后触发。
绑定事件的方法：
dom.addEventListener("webkitAnimationEnd", function(e){});
dom.addEventListener("animationEnd", function(e){});
3、gesture事件
gesturestart：当一个手指触摸屏幕之后，第二个手指再触摸屏幕时触发。
gesturechange：当上面的事件触发后立即触发。
gestureend：第二根手指离开屏幕时触发，之后将不会再次触发gesturechange。
在event当中会返回另外两个参数
scale 根据两个手指的滑动距离计算的缩放比例 初始1
rotation根据两个手指的滑动距离计算的旋转角度 初始 0
4、全屏单页布局： html,body{height:100%}
更多
传智播客·黑马程序员郑州校区地址
河南省郑州市 高新区长椿路11号大学科技园（西区）东门8号楼三层
联系电话 0371-56061160/61/62
来校路线 地铁一号线梧桐街站A口出
作者: 我是媛媛 时间: 2018-1-16 16:00
楼主辛苦了
作者: 米娅 时间: 2018-1-17 11:11
已收藏~~~
作者: VampireY 时间: 2018-1-30 19:53
补充：衍生tap事件 用的还是比较多的
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
