jquery實現(xiàn)相冊一下滑動兩次的方法
本文實例講述了jquery實現(xiàn)相冊一下滑動兩次的方法。分享給大家供大家參考。具體實現(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)手指滑動開始的時候記錄下時間,結(jié)束的時候在記錄下時間,如果兩個時間差相隔很近,就結(jié)束。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
- jquery+html仿翻頁相冊功能
- jquery+CSS3實現(xiàn)3D拖拽相冊效果
- 非常漂亮的相冊集 使用jquery制作相冊集
- Jquery全屏相冊插件zoomvisualizer具有調(diào)節(jié)放大與縮小功能
- jQuery實現(xiàn)帶滾動導(dǎo)航效果的全屏滾動相冊實例
- jQuery插件實現(xiàn)大圖全屏圖片相冊
- 基于spring+hibernate+JQuery開發(fā)之電子相冊(附源碼下載)
- jQuery 網(wǎng)易相冊鼠標(biāo)移動顯示隱藏效果實現(xiàn)代碼
- 收集的10個免費的jQuery相冊
- Html5+jQuery+CSS制作相冊小記錄
相關(guān)文章
利用jQuery簡單實現(xiàn)產(chǎn)品展示圖片左右滾動功能(示例代碼)
本篇文章主要是對利用jQuery簡單實現(xiàn)產(chǎn)品展示圖片左右滾動功能的示例代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01jquery插件tytabs.jquery.min.js實現(xiàn)漸變TAB選項卡效果
這篇文章主要介紹了jquery插件tytabs.jquery.min.js實現(xiàn)漸變TAB選項卡效果,實例分析了tytabs.jquery.min.js插件實現(xiàn)tab選項卡切換效果的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08jQuery實現(xiàn)表單input中提示文字value隨鼠標(biāo)焦點移進移出而顯示或隱藏的代碼
表單input中提示文字value隨鼠標(biāo)焦點移進移出而顯示或隱藏的jQuery代碼2010-03-03jQuery中bind與live的用法及區(qū)別小結(jié)
本篇文章主要是對jQuery中bind與live的用法以及區(qū)別進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01jQuery Mobile和HTML5開發(fā)App推廣注冊頁
jQuery Mobile和HTML5的組合可以直接開發(fā)web版的app,下面通過本教程給大家分享jQuery Mobile和HTML5開發(fā)App推廣注冊頁的實例代碼,感興趣的朋友參考下吧2016-11-11修復(fù)jQuery tablesorter無法正確排序的bug(加千分位數(shù)字后)
這篇文章主要介紹了如何修復(fù)jQuery tablesorter無法正確排序的bug(加千分位數(shù)字后)的相關(guān)資料,需要的朋友可以參考下2016-03-03