從pc端到移動端相信很多前端攻城師為移動端發愁,寫原聲的手機端事件是非常費力的, 而jq的click有300毫秒延遲,現在有了比較不錯的jq插件hammer,Hammer.js是一個開源的,輕量級的javascript庫,它可以在不需要依賴其他東西的情況下識別觸摸,鼠標事件支持各種手機事件,比如縮放 ,qq左滑動刪除, 放大, 旋轉等。
下面用一個tab切換來介紹hammer。
用法:
1,首先引入jq2.0以上版本和jquery.hammer.js.
2,獲取元素,和jq一樣,在後面加上hammer就可以了 var hammertime = $('.tabs a').hammer();
3,可以直接用on直接添加事件hammertime.on('tap', function(ev) {} 這樣用了hammer中的tap點擊事件。function裡可以寫自己的js。
hammer.dragstart = function(ev) { };// 開始拖動</span> hammer.drag = function(ev) { }; // 拖動中</span> hammer.dragend = function(ev) { }; // 拖動結束</span> hammer.onswipe = function(ev) { }; // 滑動</span> hammer.tap = function(ev) { }; // 單擊</span> hammer.doubletap = function(ev) { }; //雙擊</span> hammer.hold = function(ev) { };// 長按</span> hammer.release = function(ev) { }; // 手指離開屏幕</span>
體驗鏈接:http://hammerjs.github.io/
js code
$(function() { var hammertime = $('.tabs a').hammer(); hammertime.on('tap', function(ev) { $(this).addClass('actives').siblings().removeClass('actives');//添加一個class 同輩級移除。 var index = $('.tabs a').index(this); //索引 $('.tab-bott').eq(index).show().siblings().hide(); }) })
以上所述就是本文的全部內容了,希望大家能夠喜歡。