js实现移动端手指左右上下滑动翻页效果
var ele = document.getElementsByClassName(“img-box”)[0]; var beginX, beginY, endX, endY, swipeLeft, swipeRight;
ele.addEventListener(‘touchstart’, function (event) {
event.stopPropagation();
event.preventDefault();
beginX = event.targetTouches[0].screenX;
beginY = event.targetTouches[0].screenY;
swipeLeft = false, swipeRight = false;
});
ele.addEventListener(‘touchmove’, function (event) {
event.stopPropagation();
event.preventDefault();
endX = event.targetTouches[0].screenX;
endY = event.targetTouches[0].screenY; // 左右滑动
if (Math.abs(endX – beginX) – Math.abs(endY – beginY) > 0) { /*向右滑动*/
if (endX – beginX > 0) {
swipeRight = true;
swipeLeft = false;
} /*向左滑动*/
else {
swipeLeft = true;
swipeRight = false;
}
} else if(Math.abs(endX – beginX) – Math.abs(endY – beginY) < 0)
{ // 上下滑动 }
});
ele.addEventListener(‘touchend’, function (event) {
event.stopPropagation();
event.preventDefault(); if (Math.abs(endX – beginX) – Math.abs(endY – beginY) > 0) {
event.stopPropagation();
event.preventDefault();if (swipeRight) {
swipeRight = !swipeRight; /*向右滑动*/
} if(swipeLeft) {
swipeLeft = !swipeLeft; /*向左滑动*/
}
}
});
【如何制作上下滑动翻页的网页】
除了这种方法之外可以使用第三方插件来实现同样的效果，如QuoJS包含了多种移动端手势效果及ajax请求等操作，但是在使用过程中遇到了问题 。使用了QuoJS后，会造成JQuery的一些单击事件和一些a标签href属性失效 。并且发现QuoJS的swipeLeft和swipeRight事件中 ， 手指只能水平滑动 ， 如果稍微倾斜一点滑动，则事件不生效 ， 也不知道是不是本人的设备问题 。
