好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

jquery+检测手指滑动

JQuery是一种流行的JavaScript库,用于在网站开发中实现各种交互效果。其中之一是检测手指滑动。在移动设备上,用户可以使用手指滑动来导航网站或滚动内容。以下是如何使用JQuery来检测手指滑动:

$(document).on('touchstart', function(e) {
startX = e.originalEvent.touches[0].clientX;
startY = e.originalEvent.touches[0].clientY;
});
$(document).on('touchmove', function(e) {
var diffX = e.originalEvent.touches[0].clientX - startX;
var diffY = e.originalEvent.touches[0].clientY - startY;
if (Math.abs(diffX) >Math.abs(diffY)) {
// 检测水平滑动
if (diffX >0) {
// 向右滑动
} else {
// 向左滑动
}
} else {
// 检测垂直滑动
if (diffY >0) {
// 向下滑动
} else {
// 向上滑动
}
}
});

首先,在文档上监听'touchstart'事件来保存起始点。然后,在'touchmove'事件中,将当前点与起始点比较以获得滑动距离。通过比较水平滑动和垂直滑动的距离,在不同方向上检测滑动。可以根据需要在相应的条件下添加代码来实现所需的交互行为。

查看更多关于jquery+检测手指滑动的详细内容...

  阅读:48次