移动web开发---第二天

Posted 2020-10-23

一、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%}