移動(dòng)端JQ插件hammer使用詳解
從pc端到移動(dòng)端相信很多前端攻城師為移動(dòng)端發(fā)愁,寫原聲的手機(jī)端事件是非常費(fèi)力的, 而jq的click有300毫秒延遲,現(xiàn)在有了比較不錯(cuò)的jq插件hammer,Hammer.js是一個(gè)開源的,輕量級(jí)的javascript庫(kù),它可以在不需要依賴其他東西的情況下識(shí)別觸摸,鼠標(biāo)事件支持各種手機(jī)事件,比如縮放 ,qq左滑動(dòng)刪除, 放大, 旋轉(zhuǎn)等。
下面用一個(gè)tab切換來(lái)介紹hammer。
用法:
1,首先引入jq2.0以上版本和jquery.hammer.js.
2,獲取元素,和jq一樣,在后面加上hammer就可以了 var hammertime = $('.tabs a').hammer();
3,可以直接用on直接添加事件hammertime.on('tap', function(ev) {} 這樣用了hammer中的tap點(diǎn)擊事件。function里可以寫自己的js。
hammer.dragstart = function(ev) { };// 開始拖動(dòng)</span> hammer.drag = function(ev) { }; // 拖動(dòng)中</span> hammer.dragend = function(ev) { }; // 拖動(dòng)結(jié)束</span> hammer.onswipe = function(ev) { }; // 滑動(dòng)</span> hammer.tap = function(ev) { }; // 單擊</span> hammer.doubletap = function(ev) { }; //雙擊</span> hammer.hold = function(ev) { };// 長(zhǎng)按</span> hammer.release = function(ev) { }; // 手指離開屏幕</span>
體驗(yàn)鏈接:http://hammerjs.github.io/
js code
$(function() { var hammertime = $('.tabs a').hammer(); hammertime.on('tap', function(ev) { $(this).addClass('actives').siblings().removeClass('actives');//添加一個(gè)class 同輩級(jí)移除。 var index = $('.tabs a').index(this); //索引 $('.tab-bott').eq(index).show().siblings().hide(); }) })
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- Thinkphp框架開發(fā)移動(dòng)端接口(2)
- Thinkphp框架開發(fā)移動(dòng)端接口(1)
- 使用jQuery Mobile框架開發(fā)移動(dòng)端Web App的入門教程
- 使用Thinkphp框架開發(fā)移動(dòng)端接口
- Hammer.js+輪播原理實(shí)現(xiàn)簡(jiǎn)潔的滑屏功能
- jQuery 移動(dòng)端artEditor富文本編輯器
- 手機(jī)平板等移動(dòng)端適配跳轉(zhuǎn)URL的js代碼
- 傾力總結(jié)40條常見的移動(dòng)端Web頁(yè)面問(wèn)題解決方案
- JS判斷移動(dòng)端訪問(wèn)設(shè)備并加載對(duì)應(yīng)CSS樣式
- 移動(dòng)端腳本框架Hammer.js
相關(guān)文章
jquery實(shí)現(xiàn)樓層滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)樓層滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-0115款優(yōu)秀的jQuery導(dǎo)航菜單插件分享
這篇文章收集了15款優(yōu)秀的jQuery導(dǎo)航菜單插件分享給大家。jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架,使用簡(jiǎn)單靈活,同時(shí)還有許多成熟的插件可供選擇,jQuery 讓網(wǎng)站有更好的可用性和用戶體驗(yàn),給訪問(wèn)者對(duì)網(wǎng)站留下非常好的印象。2011-07-07jquery ajax,ashx,json的用法總結(jié)
本篇文章主要是對(duì)jquery ajax,ashx,json的用法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02Jquery創(chuàng)建一個(gè)層當(dāng)鼠標(biāo)移動(dòng)到層上面不消失效果
使用Jquery創(chuàng)建一個(gè)層,實(shí)現(xiàn)當(dāng)鼠標(biāo)移動(dòng)到層上面不消失,示例代碼如下,感興趣的朋友可以參考下2013-12-12jQuery 瀑布流 浮動(dòng)布局(一)(延遲AJAX加載圖片)
瀑布流:這種布局適合于小數(shù)據(jù)塊,每個(gè)數(shù)據(jù)塊內(nèi)容相近且沒有側(cè)重。通常,隨著頁(yè)面滾動(dòng)條向下滾動(dòng),這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部2012-05-05jquery動(dòng)態(tài)增加text元素以及刪除文本內(nèi)容實(shí)例代碼
這段代碼是通過(guò)jquery動(dòng)態(tài)增加限定數(shù)額的text,以及清除文本內(nèi)容,用到了after()方法追加元素,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07jQuery select表單提交省市區(qū)城市三級(jí)聯(lián)動(dòng)核心代碼
這篇文章主要介紹了jQuery select表單提交省市區(qū)城市三級(jí)聯(lián)動(dòng)核心代碼,需要的朋友可以參考下2014-06-06jQuery實(shí)現(xiàn)獲取及設(shè)置CSS樣式操作詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取及設(shè)置CSS樣式操作,結(jié)合實(shí)例形式分析了jQuery中常用的addClass()、removeClass()、toggleClass()及css()相關(guān)使用方法及操作注意事項(xiàng),需要的朋友可以參考下2018-09-09淺析jQuery Ajax請(qǐng)求參數(shù)和返回?cái)?shù)據(jù)的處理
這篇文章主要介紹了淺析jQuery Ajax請(qǐng)求參數(shù)和返回?cái)?shù)據(jù)的處理的相關(guān)資料,需要的朋友可以參考下2016-02-02