最近一直在做手機App H5的開發，在開發過程中，經常會遇到很多滑動事件，寫個demo，分享自己的一些寫法。（如寫的不好，輕噴!）
直接貼代碼
html css代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>touch demo</title> <style type="text/css"> #demo{ margin-top:200px; height: 200px; display: -webkit-box; } #demo1{ background: red; width: 100%; height: 200px; } #demo2{ background: blue; width: 100%; height: 200px; } body{ overflow: hidden; } </style> </head> <body> <div id="demo"> <div id="demo1"></div> <div id="demo2"></div> </div> </body> </html>
js代碼
var slideDom = document.getElementById("demo");//滑動區域
var length = slideDom.children.length;//子類節點長度
var index = 0;//初始下標
window.prevX = 0;
slideDom.addEventListener('touchstart', touchstart, false);
slideDom.addEventListener('touchmove', touchmove, false);
slideDom.addEventListener('touchend', touchend, false);
//開始滑動
function touchstart(e){
var point = getPoint(e);
window.startX = point.pageX;
console.log(window.startX);
};
//滑動過程中
function touchmove(e){
e.preventDefault();//阻止默認行為
var point = getPoint(e);
window.moveX = point.pageX;
window.deltaX = window.moveX - window.startX;
domove(window.deltaX+window.prevX);
};
//結束滑動
function touchend(e){
var x = Math.abs(window.deltaX);
var item_w = document.getElementById("demo1").offsetWidth;
if(window.deltaX>0){
if(x>item_w){
var indexd = Math.round(x / item_w);
index = index - indexd;
}else{
if(x/item_w > 0.3){
index--
}
}
}else if(window.deltaX<0){
if(x>item_w){
var indexd = Math.round(x / item_w);
index = index + indexd;
}else{
if(x/item_w > 0.3){
index++;
}
}
}
if(index >= (length-1)){
index = length-1;
}
if(index <0 ){
index = 0;
}
window.prevX = -index*item_w;
domove(window.prevX,true);
};
//默認以第一個手指的位置計算
function getPoint(e) {
return e.touches ? e.touches[0] : e;
};
//利用transform移動
function domove(x,t){
if(t){
slideDom.setAttribute('style', 'transform: translate(' + x + 'px, 0px);transition:transform 300ms ease');
}else{
slideDom.setAttribute('style', 'transform: translate(' + x + 'px, 0px);transition:transform 0ms ease');
}
};
如果用戶是多指操作，默認以第一個手指的位置進行計算。
在事件結束時，對div移動的位置進行計算。
在 index的范圍內，如果div移動范圍超過的0.3；就在切換到下一index的div；