zoukankan      html  css  js  c++  java
  • 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事件中,手指只能水平滑动,如果稍微倾斜一点滑动,则事件不生效,也不知道是不是本人的设备问题。

  • 相关阅读:
    Java中有哪些无锁技术来解决并发问题?如何使用?
    什么是活锁和饥饿?
    如何避免死锁?
    什么是死锁?
    synchronized锁的升级原理是什么?
    Java中的锁之间的区别是什么?
    可重入锁与不可重入锁之间的区别与性能差异?
    数据库分库的策略
    QPS、PV和需要部署机器数量计算公式(转)
    LVS Nginx HAProxy 优缺点
  • 原文地址:https://www.cnblogs.com/ianunspace/p/6125276.html
Copyright © 2011-2022 走看看