移动端获取用户在屏幕滑动方向（javascript）混合模式封装

最新推荐文章于 2024-06-14 11:01:38 发布

weixin_30794851

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量85

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mingmliang/p/9026076.html

版权

注意:无法使用touchend来获取clientX，touchend是在用户滑动结束之后才回调

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #touchDiv,#touchDiv2{
            height: 500px;
            width: 500px;
            background-color: red;
        }
        #touchDiv2{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="touchDiv"></div>
    <div id="touchDiv2"></div>
    <script type="text/javascript">
        function TouchObj(touchEle, offset,prev,next) {
          this.touchEle = touchEle;
          this.startX;
          this.endX;
          this.prev=prev;
          this.next=next;
          this.offset = offset;
          this.init(this);
        }
         
        TouchObj.prototype.init = function(this_) {
              this.touchEle.addEventListener('touchstart',function(e){
                this_.startX=e.touches[0].clientX;
            });
            this.touchEle.addEventListener('touchmove',function(e){
                this_.endX=e.touches[0].clientX;
            });
            this.touchEle.addEventListener('touchend',function(e){
                    distance=Math.abs(this_.startX-this_.endX);
                    if(distance>this_.offset){
                        this_.startX>this_.endX?eval(this_.next):eval(this_.prev);
                    }
            });
        };
         

         window.onload=function(){
             var touchTest2 = new TouchObj(document.getElementById('touchDiv'),50,"console.log('prev')","console.log('next')"),
             touchTest3 = new TouchObj(document.getElementById('touchDiv2'),50,"console.log('prev1')","console.log('next2')");
         };
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/mingmliang/p/9026076.html

weixin_30794851

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端获取用户在屏幕滑动方向（javascript）混合模式封装

注意:无法使用touchend来获取clientX，touchend是在用户滑动结束之后才回调<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #touchDiv,#touchDiv2{...
复制链接

扫一扫