快捷導(dǎo)航

jquery實(shí)現(xiàn)相冊(cè)一下滑動(dòng)兩次的方法

更新時(shí)間：2015年02月09日 12:00:42 作者：hukang00

這篇文章主要介紹了jquery實(shí)現(xiàn)相冊(cè)一下滑動(dòng)兩次的方法,是非常實(shí)用的圖片特效技巧,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)相冊(cè)一下滑動(dòng)兩次的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

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');
});

當(dāng)手指滑動(dòng)開始的時(shí)候記錄下時(shí)間，結(jié)束的時(shí)候在記錄下時(shí)間，如果兩個(gè)時(shí)間差相隔很近，就結(jié)束。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

3種不同的ContextMenu右鍵菜單實(shí)現(xiàn)代碼
本文給大家分享3種不同的ContextMenu右鍵菜單實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
Jquery插件編寫簡(jiǎn)明教程
這篇文章主要介紹了Jquery插件編寫簡(jiǎn)明教程,jquery插件開發(fā)實(shí)例,需要的朋友可以參考下
2014-03-03
jQuery實(shí)現(xiàn)彈窗居中效果類似alert()
本文給大家分享基于jquery實(shí)現(xiàn)彈窗居中效果類似于alert(),代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下
2017-02-02
基于jquery tab切換(防止頁(yè)面刷新)
tab切換，是一個(gè)很常見的效果，今天在項(xiàng)目中遇到這樣一個(gè)問(wèn)題。就是切換后，頁(yè)面刷新，又重新定位到第一個(gè)上了，很是郁悶
2012-05-05
對(duì)于this和$(this)的個(gè)人理解
this指的是javascript對(duì)象而$(this)就是就jquery對(duì)象，不懂的朋友可以看看本文
2013-09-09
編寫自己的jQuery提示框（Tip）插件
這篇文章主要介紹了編寫自己的jQuery提示框（Tip）插件的方法,需要的朋友可以參考下
2015-02-02
jquery Validation表單驗(yàn)證使用詳解
功能強(qiáng)大的 jquery 表單驗(yàn)證插件，適用于日常的 E-mail、電話號(hào)碼、網(wǎng)址等驗(yàn)證及 Ajax 驗(yàn)證，除自身?yè)碛胸S富的驗(yàn)證規(guī)則外，還可以添加自定義的驗(yàn)證規(guī)則。兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+
2015-04-04
jquery 插件實(shí)現(xiàn)圖片延遲加載效果代碼
前幾天上QQ的在線視頻網(wǎng)站，看到上面的影片列表頁(yè)的圖片有這樣一種效果：當(dāng)向下拉動(dòng)滾動(dòng)條時(shí)下面的圖片才開始加載，就是說(shuō)它不會(huì)一下子把所有的圖片都加載出來(lái)，拉動(dòng)滾動(dòng)條后用戶看到了才會(huì)顯示，這是一個(gè)很不錯(cuò)的用戶體驗(yàn)。
2010-02-02
在jquery中的ajax方法怎樣通過(guò)JSONP進(jìn)行遠(yuǎn)程調(diào)用
這一節(jié)主要演示下在JQUERY中的ajax方法怎樣通過(guò)JSONP進(jìn)行遠(yuǎn)程調(diào)用,需要的朋友可以參考下
2014-04-04
jQuery事件blur()方法的使用實(shí)例講解
今天小編就為大家分享一篇關(guān)于jQuery事件blur()方法的使用實(shí)例講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-03-03