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