移动web开发---第二天

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