從pc端到移動(dòng)端相信很多前端攻城師為移動(dòng)端發(fā)愁，寫原聲的手機(jī)端事件是非常費(fèi)力的， 而jq的click有300毫秒延遲，現(xiàn)在有了比較不錯(cuò)的jq插件hammer，Hammer.js是一個(gè)開(kāi)源的，輕量級(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) { };// 開(kāi)始拖動(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) { }; // 手指離開(kāi)屏幕</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)容了，希望大家能夠喜歡。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
