手機(jī)開(kāi)發(fā)中，除了我們平時(shí)用的jquery基本事件之外，還有很多手勢(shì)，今天介紹一款jquery手勢(shì)插件jGestures，地址是：http://jgestures.codeplex.com/

這個(gè)插件的強(qiáng)大之處在于它可以監(jiān)聽(tīng)以下事件’pinch’(縮放手勢(shì)), ‘rotate’(旋轉(zhuǎn)手勢(shì)), ‘swipe’(滑動(dòng)手勢(shì)), ‘tap’(輕觸) 以及 ‘orientationchange’(改變?cè)O(shè)備方向)。等等，有了這個(gè)插件，手機(jī)web開(kāi)發(fā)就更加方便了。

事件簡(jiǎn)介

orientationchange 代表設(shè)備順時(shí)針或者逆時(shí)針旋轉(zhuǎn).此事件可以被設(shè)備觸發(fā),可能使用的是重力傳感器.

pinch 縮放手勢(shì)(兩個(gè)手指在屏幕上的相對(duì)運(yùn)動(dòng))

rotate 旋轉(zhuǎn)手勢(shì)(兩個(gè)手指順時(shí)針或者逆時(shí)針旋轉(zhuǎn))

swipemove 在正在滑動(dòng)時(shí)觸發(fā)(在設(shè)備屏幕上移動(dòng)手指,比如:拖動(dòng))

swipeone 單點(diǎn)滑動(dòng)手勢(shì),滑動(dòng)完成后觸發(fā)(一個(gè)手指在屏幕上移動(dòng))

swipetwo 兩點(diǎn)滑動(dòng)(兩個(gè)手指在屏幕上方向一致的滑動(dòng))

swipethree 三點(diǎn)滑動(dòng)(三個(gè)手指在屏幕上方向一致的滑動(dòng))

swipefour 四點(diǎn)滑動(dòng)(四個(gè)手指在屏幕上方向一致的滑動(dòng))

swipeup 向上滑動(dòng),在嚴(yán)格的向上滑動(dòng)手勢(shì)完成后觸發(fā)

swiperightup 向右上角滑動(dòng),在向右且向上的滑動(dòng)手勢(shì)完成后觸發(fā)

swiperight 向右滑動(dòng),在嚴(yán)格的向右滑動(dòng)手勢(shì)完成后觸發(fā)

swiperightdown 向右下角滑動(dòng),在向右且向下的滑動(dòng)手勢(shì)完成后觸發(fā)

swipedown 向下滑動(dòng),在嚴(yán)格的向下滑動(dòng)手勢(shì)完成后觸發(fā)

swipeleftdown 向左下角滑動(dòng),在向左且向下的滑動(dòng)手勢(shì)完成后觸發(fā)

swipeleft 向左滑動(dòng),在嚴(yán)格的向左滑動(dòng)手勢(shì)完成后觸發(fā)

swipeleftup 向左上角滑動(dòng),在向左且向上的滑動(dòng)手勢(shì)完成后觸發(fā)

tapone 在單個(gè)手指輕點(diǎn)的手勢(shì)后觸發(fā)

taptwo 在兩個(gè)手指一起輕點(diǎn)的手勢(shì)后觸發(fā)

tapthree 在三個(gè)手指一起輕點(diǎn)的手勢(shì)后觸發(fā)

pinchopen 撐開(kāi)手勢(shì),當(dāng)兩個(gè)手指撐大并離開(kāi)設(shè)備時(shí)觸發(fā).

pinchclose 捏緊手勢(shì),當(dāng)兩個(gè)手指捏緊并離開(kāi)設(shè)備時(shí)觸發(fā).

rotatecw 兩個(gè)手指順時(shí)針旋轉(zhuǎn)并且離開(kāi)屏幕時(shí)觸發(fā)(two fingers rotating clockwise)

rotateccw 兩個(gè)手指逆時(shí)針旋轉(zhuǎn)并且離開(kāi)屏幕時(shí)觸發(fā) (two fingers rotating counterclockwise)

shake 當(dāng)檢測(cè)到設(shè)備正在搖晃時(shí)觸發(fā)

shakefrontback 當(dāng)檢測(cè)到搖晃動(dòng)作，且可以被解讀為前后移動(dòng)之時(shí)觸發(fā).

shakeleftright 當(dāng)檢測(cè)到搖晃動(dòng)作，且可以被解讀為左右移動(dòng)之時(shí)觸發(fā).

shakeupdown 當(dāng)檢測(cè)到搖晃動(dòng)作，且可以被解讀為上下移動(dòng)之時(shí)觸發(fā).

關(guān)于swipe，我上一篇文章已經(jīng)介紹過(guò)了，http://blog.csdn.net/qq_39198420/article/details/77862782

當(dāng)頁(yè)面有滾動(dòng)條的時(shí)候，swipe的up,down，left,right可能會(huì)不觸發(fā)！事件會(huì)被滾動(dòng)事件覆蓋掉！

事件用法

<script> jQuery(document).ready(function () {jQuery(window).bind('shakeupdown',function(event_,data_){alert('shake: '+ data_.description)})}) </script>

官方案例如下：

<script> function log(event_, obj) { // ignore bubbled handlers // if ( obj.originalEvent.currentTarget !== obj.originalEvent.target ) { return; }obj.originalEvent.preventDefault();jQuery('#logger').find('li').slice(1,jQuery('#logger').find('li').size()-8).animate({'opacity':'0', 'height':'0'},function(){jQuery(this).remove()}).end().end().append('<li><b>'+jQuery(obj.originalEvent.currentTarget).attr('id')+'</b>: '+obj.description+ ' : '+obj.type +'</li>')}function manipulate(event_, obj) { // ignore bubbled handlers // if ( obj.originalEvent.currentTarget !== obj.originalEvent.target ) { return; }event_.preventDefault();obj.originalEvent.preventDefault();log(event_, obj)var _a = obj.description.split(':');jQuery(obj.originalEvent.currentTarget).css('zIndex','1000')switch(_a[0]) {case 'pinch'://jQuery(obj.originalEvent.currentTarget).css('-webkit-transform','scale('+ ( obj.direction * obj.delta[0].moved ) +')');break;case 'rotate'://jQuery(obj.originalEvent.currentTarget).css('-webkit-transform','rotate('+ ( obj.delta[0].moved ) +'deg)');break;case 'swipemove':if(_a[1] != 1) {break;}jQuery(obj.originalEvent.currentTarget).css('-webkit-transition','');jQuery(obj.originalEvent.currentTarget).css('left', parseInt(jQuery(obj.originalEvent.currentTarget).css('left')) + obj.delta[0].startX );jQuery(obj.originalEvent.currentTarget).css('top', parseInt(jQuery(obj.originalEvent.currentTarget).css('top')) + obj.delta[0].startY ); // jQuery(obj.originalEvent.currentTarget).data('moving',true)break;case 'swipe' : // if(_a[1] != 1 || jQuery(obj.originalEvent.currentTarget).data('moving') } {break;}jQuery(obj.originalEvent.currentTarget).css('-webkit-transition','all 1s ease-out').css('left', parseInt(jQuery(obj.originalEvent.currentTarget).css('left')) + obj.delta[0].startX );jQuery(obj.originalEvent.currentTarget).css('-webkit-transition','all 1s ease-out').css('top', parseInt(jQuery(obj.originalEvent.currentTarget).css('top')) + obj.delta[0].startY );break;}jQuery(obj.originalEvent.currentTarget).css('zIndex','') }function BlockMove(event) {// Tell Safari not to move the window.event.preventDefault() ;}jQuery(document).ready(function() {jQuery('#tap').bind('tapone',log);jQuery('#tap').bind('taptwo',log);jQuery('#tap').bind('tapthree',log);jQuery('#tap').bind('tapfour',log);jQuery('#swipe').bind('swipeone',log);jQuery('#swipe').bind('swipetwo',log);jQuery('#swipe').bind('swipethree',log);jQuery('#swipe').bind('swipefour',log);jQuery('#swipe').bind('swipeup',log);jQuery('#swipe').bind('swiperightup',log);jQuery('#swipe').bind('swiperight',log);jQuery('#swipe').bind('swiperightdown',log);jQuery('#swipe').bind('swipedown',log);jQuery('#swipe').bind('swipeleftdown',log);jQuery('#swipe').bind('swipeleft',log);jQuery('#swipe').bind('swipeleftup',log);jQuery('#change').bind('pinchopen',manipulate);jQuery('#change').bind('pinchclose',manipulate);jQuery('#change').bind('rotatecw',manipulate);jQuery('#change').bind('rotateccw',manipulate);jQuery('#change').bind('swipeone',manipulate);jQuery('#livechange').bind('swipeone',manipulate);jQuery('#livechange').bind('swipemove',manipulate);jQuery('#livechange').bind('pinch',manipulate);jQuery('#livechange').bind('rotate',manipulate);})</script>

總結(jié)

以上是生活随笔為你收集整理的移动端那些事儿（二）jquery手势插件之jGestures的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。