移動端JQ插件hammer使用詳解
更新時間：2015年07月03日 11:08:53 投稿：hebedich
本文給大家介紹的是一款移動端下的jQuery插件Hammer.js，他是一個開源的，輕量級的javascript庫，它可以在不需要依賴其他東西的情況下識別觸摸，鼠標(biāo)事件支持各種手機事件，比如縮放，qq左滑動刪除，放大，旋轉(zhuǎn)等
從pc端到移動端相信很多前端攻城師為移動端發(fā)愁，寫原聲的手機端事件是非常費力的， 而jq的click有300毫秒延遲，現(xiàn)在有了比較不錯的jq插件hammer，Hammer.js是一個開源的，輕量級的javascript庫，它可以在不需要依賴其他東西的情況下識別觸摸，鼠標(biāo)事件支持各種手機事件，比如縮放 ，qq左滑動刪除， 放大， 旋轉(zhuǎn)等。
下面用一個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) { }; // 拖動結(jié)束</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();
})
})
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
下面小編就為大家?guī)硪黄猨Query的ajax和遍歷數(shù)組json實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了jQuery中odd選擇器的定義和用法,較為詳細的分析了odd選擇器的具體功能、定義與使用方法,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
項目中應(yīng)用jQuery解析讀取XML語言配置文件來實現(xiàn)語言的調(diào)度。這是jQuery解析讀取XML文件功能的測試源碼，現(xiàn)拿出來分享。2009-10-10
這篇文章主要介紹了jQuery 檢查某個元素在頁面上是否存在實例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
jQuery Tips 為AJAX回調(diào)函數(shù)傳遞額外參數(shù)的方法
討論這個問題基于如下場景：點擊頁面上某個按鈕之后，觸發(fā)click事件，事件處理函數(shù)內(nèi)部發(fā)送一個AJAX請求，AJAX回調(diào)函數(shù)更新頁面的某一個部分。2010-12-12
jQuery實戰(zhàn)之仿淘寶商城左側(cè)導(dǎo)航效果
網(wǎng)絡(luò)上很很多這種效果的JS寫法，但是還沒有看見用jQuery寫的，效果實現(xiàn)很簡單，確切的說是用jquery實現(xiàn)這個效果很簡單，這就是jquery的強大和魅力所在。2011-04-04
這篇文章主要介紹了jQuery實現(xiàn)的簡單日歷組件定義與用法,結(jié)合實例形式詳細分析了基于jQuery擴展實現(xiàn)日歷功能的相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋
一個輕量級的cookie 插件，可以讀取、寫入、刪除 cookie。這篇文章主要介紹了jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋,需要的朋友可以參考下2017-03-03
基于jQuery實現(xiàn)Ajax驗證用戶名是否存在實例
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)Ajax驗證用戶名是否存在實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
input 和 textarea 輸入框最大文字限制的jquery插件
input 和 textarea 輸入框最大文字限制的jquery插件，需要的朋友可以參考下。2011-10-10