快捷導(dǎo)航

移動(dòng)端JQ插件hammer使用詳解

更新時(shí)間：2015年07月03日 11:08:53 投稿：hebedich

本文給大家介紹的是一款移動(dòng)端下的jQuery插件Hammer.js，他是一個(gè)開源的，輕量級的javascript庫，它可以在不需要依賴其他東西的情況下識別觸摸，鼠標(biāo)事件支持各種手機(jī)事件，比如縮放，qq左滑動(dòng)刪除，放大，旋轉(zhuǎn)等

從pc端到移動(dòng)端相信很多前端攻城師為移動(dòng)端發(fā)愁，寫原聲的手機(jī)端事件是非常費(fèi)力的，而jq的click有300毫秒延遲，現(xiàn)在有了比較不錯(cuò)的jq插件hammer，Hammer.js是一個(gè)開源的，輕量級的javascript庫，它可以在不需要依賴其他東西的情況下識別觸摸，鼠標(biāo)事件支持各種手機(jī)事件，比如縮放，qq左滑動(dòng)刪除，放大，旋轉(zhuǎn)等。

下面用一個(gè)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點(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) { };// 長按</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 同輩級移除。
　　　　var index = $('.tabs a').index(this); //索引
　　　　$('.tab-bott').eq(index).show().siblings().hide(); 
　　})
})

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

jQuery的ajax和遍歷數(shù)組json實(shí)例代碼
下面小編就為大家?guī)硪黄猨Query的ajax和遍歷數(shù)組json實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
jQuery中odd選擇器的定義和用法
這篇文章主要介紹了jQuery中odd選擇器的定義和用法,較為詳細(xì)的分析了odd選擇器的具體功能、定義與使用方法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery 行級解析讀取XML文件（附源碼）
項(xiàng)目中應(yīng)用jQuery解析讀取XML語言配置文件來實(shí)現(xiàn)語言的調(diào)度。這是jQuery解析讀取XML文件功能的測試源碼，現(xiàn)拿出來分享。
2009-10-10
jQuery 檢查某個(gè)元素在頁面上是否存在實(shí)例代碼
這篇文章主要介紹了jQuery 檢查某個(gè)元素在頁面上是否存在實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-10-10
jQuery Tips 為AJAX回調(diào)函數(shù)傳遞額外參數(shù)的方法
討論這個(gè)問題基于如下場景：點(diǎn)擊頁面上某個(gè)按鈕之后，觸發(fā)click事件，事件處理函數(shù)內(nèi)部發(fā)送一個(gè)AJAX請求，AJAX回調(diào)函數(shù)更新頁面的某一個(gè)部分。
2010-12-12
jQuery實(shí)戰(zhàn)之仿淘寶商城左側(cè)導(dǎo)航效果
網(wǎng)絡(luò)上很很多這種效果的JS寫法，但是還沒有看見用jQuery寫的，效果實(shí)現(xiàn)很簡單，確切的說是用jquery實(shí)現(xiàn)這個(gè)效果很簡單，這就是jquery的強(qiáng)大和魅力所在。
2011-04-04
jQuery實(shí)現(xiàn)的簡單日歷組件定義與用法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單日歷組件定義與用法,結(jié)合實(shí)例形式詳細(xì)分析了基于jQuery擴(kuò)展實(shí)現(xiàn)日歷功能的相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12
jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋
一個(gè)輕量級的cookie 插件，可以讀取、寫入、刪除 cookie。這篇文章主要介紹了jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋,需要的朋友可以參考下
2017-03-03
基于jQuery實(shí)現(xiàn)Ajax驗(yàn)證用戶名是否存在實(shí)例
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)Ajax驗(yàn)證用戶名是否存在實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-03-03
input 和 textarea 輸入框最大文字限制的jquery插件
input 和 textarea 輸入框最大文字限制的jquery插件，需要的朋友可以參考下。
2011-10-10