手机端滑动、长按事件插件touchswipe.js的使用示例

最新推荐文章于 2024-08-19 10:43:39 发布

vcxiaohan2

最新推荐文章于 2024-08-19 10:43:39 发布

阅读量7.9k

点赞数 2

分类专栏： jQuery插件

本文链接：https://blog.csdn.net/u011500781/article/details/51034175

版权

jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

请在这里查看示例 ☞ touchSwipe示例

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">  
  <title>demo</title>  
  
  <script src="../js/jquery-1.11.3.min.js"></script>  
  <script src="js/jquery.touchSwipe.min.js"></script>  
  
  <style>  
    * {margin: 0; padding: 0;}  
    body,html {width: 100%; height: 100%; background: pink;}  
    .div1 {height: 200px; background: red;}  
    .div2 {height: 200px; background: blue;}  
  </style>  
</head>  
<body>  
    <p>改 demo 待完善...</p>
    <p>建议在手机端测试</p>
    <p class="disable">禁用</p>  
    <p class="enable">恢复</p>  
    <p class="destroy">销毁</p>  
    <p class="init">初始化</p>  
  
    <div class="div1">  
        滑动这里  
    </div>  
    <div class="div2">  
          
    </div>  
  
  
<script>  
    $(function() {  
        //兼容ie8+、手机端  
        $('.div1').swipe({  
            /*swipe: function(event, direction, distance, duration, fingerCount, fingerData) {  
                $('body').append('direction -> '+ direction);  
                $('body').append('distance -> '+ distance);  
                $('body').append('duration -> '+ duration);  
                $('body').append('fingerCount -> '+ fingerCount);  
  
            },*/  
  
            /*//向左滑  
            swipeLeft: function(event, direction, distance, duration, fingerCount, fingerData) {  
                $('body').append('direction -> '+ direction +'<br>');  
                $('body').append('distance -> '+ distance +'<br>');  
                $('body').append('duration -> '+ duration +'<br>');  
                $('body').append('fingerCount -> '+ fingerCount +'<br>');  
  
            },*/  
  
            /*//滑动过程中  
            swipeStatus:function(event, phase, direction, distance, duration, fingerCount, fingerData, currentDirection) {  
                var html = 'phase -> '+ phase +'<br>'+ 'direction -> '+ direction +'<br>'+'distance -> '+ distance +'<br>'+'duration -> '+ duration +'<br>'+'fingerCount -> '+ fingerCount +'<br>'+'currentDirection -> '+ currentDirection +'<br>';  
  
                $('.div2').html(html);  
            },  
            triggerOnTouchEnd: false,//启动超过阈值停止插件  
<p>            threshold: 200,//滑动阈值 distance > threshold 时 phase = end</p><p><span style="white-space:pre"> excludedElements: "button, input, select, textarea, .noSwipe",</span>//让a标签也支持滑动事件</p>allowPageScroll: 'auto',//滑动时不影响滚动条的正常滚动，该项只在swipeStatus生效            maxTimeThreshold: 5000,//触摸阈值 duration > maxTimeThreshold 时 phase = cancle  
            triggerOnTouchLeave: true,//手指离开对象，停止插件  
            fingers: 'all',//手指数量(手机端生效)*/  
            tap: function(event, target) {  
                $('.div2').append('<br>tap:'+ $(target).attr('class'));  
            },  
            doubleTap: function(event, target) {  
                $('.div2').append('<br>doubleTap:'+ $(target).attr('class'));  
            },  
            hold: function(event, target) {  
                $('.div2').append('<br>hold:'+ $(target).attr('class'));  
                  
            }  
        }).on('click', function(e) {//同时绑定click  
            $('.div2').append('<br>click:'+ $(this).attr('class'));  
        }).on('dblclick', function(e) {//同时绑定click  
            $('.div2').append('<br>dblclick:'+ $(this).attr('class'));  
        });  
  
        //  
        $('.disable').on('click', function() {  
            $('.div1').swipe('disable');  
        });  
        $('.enable').on('click', function() {  
            $('.div1').swipe('enable');  
        });  
        $('.destroy').on('click', function() {  
            $('.div1').swipe('destroy');  
        });  
        $('.init').on('click', function() {  
            $('.div1').swipe({  
                swipe: function() {  
                    console.log(1);  
                },  
            });  
        });  
  
  
    });  
  
  
      
</script>  
      
  
  
  
    
</body>  
</html>