移動端那些事;hammer不錯的jq插件。

jopen 9年前發布 | 14K 次閱讀 hammer jQuery Ajax框架
 

從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(); 

})

})


 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!