iQuery移动端手势事件插件-jGestures

jGestures下载


jGestures事件简介


orientationchange

代表设备顺时针或者逆时针旋转.此事件可以被设备触发,可能使用的是重力传感器.

pinch

缩放手势(两个手指在屏幕上的相对运动)

rotate

旋转手势(两个手指顺时针或者逆时针旋转)

swipemove

在正在滑动时触发(在设备屏幕上移动手指,比如:拖动)

swipeone

单点滑动手势,滑动完成后触发(一个手指在屏幕上移动)

swipetwo

两点滑动(两个手指在屏幕上方向一致的滑动)

swipethree

三点滑动(三个手指在屏幕上方向一致的滑动)

swipefour

四点滑动(四个手指在屏幕上方向一致的滑动)

swipeup

向上滑动,在严格的向上滑动手势完成后触发

swiperightup

向右上角滑动,在向右且向上的滑动手势完成后触发

swiperight

向右滑动,在严格的向右滑动手势完成后触发

swiperightdown

向右下角滑动,在向右且向下的滑动手势完成后触发

swipedown

向下滑动,在严格的向下滑动手势完成后触发

swipeleftdown

向左下角滑动,在向左且向下的滑动手势完成后触发

swipeleft

向左滑动,在严格的向左滑动手势完成后触发

swipeleftup

向左上角滑动,在向左且向上的滑动手势完成后触发

tapone

在单个手指轻点的手势后触发

taptwo

在两个手指一起轻点的手势后触发

tapthree

在三个手指一起轻点的手势后触发

pinchopen

撑开手势,当两个手指撑大并离开设备时触发.

pinchclose

捏紧手势,当两个手指捏紧并离开设备时触发.

rotatecw

两个手指顺时针旋转并且离开屏幕时触发(two fingers rotating clockwise)

rotateccw

两个手指逆时针旋转并且离开屏幕时触发 (two fingers rotating counterclockwise)

shake

当检测到设备正在摇晃时触发

shakefrontback

当检测到摇晃动作,且可以被解读为前后移动之时触发.

shakeleftright

当检测到摇晃动作,且可以被解读为左右移动之时触发.

shakeupdown

当检测到摇晃动作,且可以被解读为上下移动之时触发.

使用示例


$(window).bind(‘shakeupdown‘,function(event_,data_){
    alert(‘shake: ‘+ data_.description)
})


注意:当页面有滚动条的时候,swipe的up,down,left,right可能会不触发!事件会被滚动事件覆盖掉!

时间: 2024-08-03 14:12:10

iQuery移动端手势事件插件-jGestures的相关文章

移动端手势事件 hammer.JS插件

一.引入hammer.JS 1.下载地址:http://download.csdn.net/detail/webxiaoma/9872249 2.官网地址:http://hammerjs.github.io/examples/ 3.CDN链接:http://hammerjs.github.io/dist/hammer.min.js 二.用法 1.首先我们先写一个出发事件的DOM元素 HTML: <style type="text/css"> html, body { wid

webapp开发相关jquery手势事件之jGestures

手机开发中,除了我们平时用的jquery基本事件之外,还有很多手势,今天介绍一款jquery手势插件jGestures,地址是:http://jgestures.codeplex.com/ 这个插件的强大之处在于它可以监听以下事件'pinch'(缩放手势), 'rotate'(旋转手势), 'swipe'(滑动手势), 'tap'(轻触) 以及 'orientationchange'(改变设备方向).等等,有了这个插件,手机web开发就更加方便了. orientationchange 代表设备顺

jGestures: jQuery的手势事件插件

官网地址:http://jgestures.codeplex.com/文档版本号: v0.7,由neuedigitale编辑,2012年5月8日最新稳定版: jGestures v0.90 - shake jGestures简介 jGestures插件允许你如同原生的jQuery事件一样监听以下事件:'pinch'(缩放手势), 'rotate'(旋转手势), 'swipe'(滑动手势), 'tap'(轻触) 以及 'orientationchange'(改变设备方向).当然,部分事件在PC浏览

H5案例分享:移动端touch事件判断滑屏手势的方向

移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 思路:用touchmove的最后坐标减去touchstart的起始坐标,X的结果如果正数,则说明手指是从左往右划动:X的结果如果负数,则说明手指是从右往左划动:Y的结果如果正数,则说明手指是从

不能遗忘移动端的手势事件

一直游离在pc端开发网站,当然也偶偶将网站制作成响应式的. 但是都没有研究过移动端的手势,上次在ctrip面试的一道题目如今还深深的刻在我的脑海中: 手机上的滑动事件该怎么处理,比如常见的app向右滑动出现菜单? 今天将hammer.js研究了一下,她主要是处理移动端的手势事件的,正如她的ad:Add touch gestures to your page. 我的思路: 1.当手指往右滑动时left块向右移动 2.当手指在红色的left向左滑动时left隐藏 代码如下: <!DOCTYPE ht

移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发. 之后百度了一下这个问题,原因是 主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会一直触发. 为了解决开发者需要,建议开发者在touchstart时调用event.preventDe

JS—触摸事件、手势事件

JS-触摸事件.手势事件 dbclick触屏设备不支持双击事件.双击浏览器窗口,会放大画面.可以通过在head标签内加上这么一行: <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 可以实现,我们编写的页面不会随着用的手势而放大缩小.关于meta标签,我还没有研究过,罪过啊. mouse在触屏上

H5移动端手势密码组件

项目简介 最近参加了2017年360前端星计划,完成了一个有趣的UI组件开发大作业,借机和大家分享一下移动端开发的技术啦~~ 本项目采用原生JS和Canvas实现移动端手势密码组件,支持手势密码设置和验证. 先加星后看,年薪百万!欢迎大家关注我的github,互相学习~~      demo演示地址:http://tangzhirong.github.io/lock/example/demo.html      项目github地址:https://github.com/tangzhirong/

JavaScript触摸与手势事件

处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1.touchstart:  // 手指放到屏幕上的时候触发 2.touchmove:  // 手指在屏幕上移动的时候触发 3.touchend:  // 手指从屏幕上拿起的时候触发 4touchcancel:  // 系统取消touch事件的时候触发.至于系统什么时候会取消,不详 属性 1.client / clientY:// 触摸点相对于浏览器窗口viewport的位置 2.pageX / pageY: