js实现移动端手指左右上下滑动翻页效果

Posted 随遇而安

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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事件中,手指只能水平滑动,如果稍微倾斜一点滑动,则事件不生效,也不知道是不是本人的设备问题。

以上是关于js实现移动端手指左右上下滑动翻页效果的主要内容,如果未能解决你的问题,请参考以下文章

移动端的一个js效果:手滑动向上向下滚动li标签

web前端课程技术内容之如何做一个简单的手机端页面的翻页

web前端课程技术内容之如何做一个简单的手机端页面的翻页

实现移动端touch事件的横向滑动列表效果

移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件

html5上下滑动“翻页”实现,是真正的翻页