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

来源：互联网发布：区域增长算法 matlab 编辑：程序博客网时间：2024/06/15 01:15
请在这里查看示例 ☞ 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>
2 0