您的位置：首页 > 移动开发

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

2016-04-01 09:33 615 查看
请在这里查看示例 ☞ 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航