由于这是pc页面,会有缩放比例问题,所以最好还是自己建个页面去移动端测
滑动试试(这里只绑定touch事件,可使用chrome模拟,或者直接使用移动设备)
效果代码:
var swipeBase = new SwipeBase(), msg= document.getElementById(‘msg‘); document.addEventListener(‘touchstart‘, function (e) { var touche = e.touches[0]; swipeBase.start( touche.pageX); e.preventDefault(); }); document.addEventListener(‘touchmove‘, function (e) { var touche = e.touches[0]; swipeBase.move( touche.pageX); }); document.addEventListener(‘touchend‘, function (e) { swipeBase.end(); }); function SwipeBase() { var prevX, toX; this.start = function (x) { prevX = x; toX = 0; }; this.move = function (x) { toX = x - prevX; prevX = x; }; this.end = function () { var s=10;// 此处调节敏感度 if (toX > s) { msg.innerHTML=‘<b>右</b> 滑动‘+toX; } else if (toX < -s) { msg.innerHTML=‘<b>左</b> 滑动‘+toX; } else{ msg.innerHTML=‘<b>未发生</b> 滑动‘+toX; } }; }
时间: 2024-11-01 09:44:23