jquery 相册一下滑动两次

原创于 2014-09-28 17:48:21 发布 · 628 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #相册 #滑动 #两次

js 专栏收录该内容

17 篇文章

订阅专栏

本文探讨了在网页交互中如何通过记录手指触摸开始和结束的时间，判断滑动距离并进行相应操作，同时优化了时间间隔判断逻辑以提高用户体验。详细介绍了事件监听、时间戳比较以及滑动方向检测的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var t1=null; 定义为全局变量

$('body').on('touchstart', '#gallerySlider img', function(e){
var touch = e.originalEvent,
startX = touch.changedTouches[0].pageX;
if (t1 == null){
t1 = new Date().getTime();
}else{
var t2 = new Date().getTime();
if(t2 - t1 < 500){
t1 = t2;
return;
}else{
t1 = t2;
}

}

slider.on('touchmove',function(e){
event.stopPropagation();
touch = e.originalEvent.touches[0] ||
e.originalEvent.changedTouches[0];

if(touch.pageX - startX > 10){
slider.off('touchmove');
showPrevious();
}
else if (touch.pageX - startX < -10){
slider.off('touchmove');
showNext();
}
});
return false;
}).on('touchend',function(){
slider.off('touchmove');

});

当手指滑动开始的时候记录下时间，结束的时候在记录下时间，如果两个时间差相隔很近，就结束。