移動web開發---第二天

標籤：listener   根據   滑動   更改   距離   參數   nal   height   將不   

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

移動web開發---第二天