作者:痞子|时间:2013-05-21|分类目录:js,javascript,jquery教程|Tag标签: javascriptjTouch|阅读(857)

7 条评论

Javascript触屏手势库-jTouch

触屏手势库--JTouch

封装的代码有不足支出,以及bug等欢迎大家多多指正。

Github地址:https://github.com/liutian1937/JTouch (大家可以fork项目跟踪最新进展)

JTouch的介绍

JTouch是针对触屏浏览器提供的一个手势集合,由于我的测试环境主要是ipad,所以对于其他触屏设备的支持情况可能会有所不足。这个在后期版本升级过程中会修复。

JTouch在手指移动上去会触发start事件,结束会触发end事件。 主要支持的手势有tap(单击),doubletap(双击),longtap(长按),hold(拖拽),swipe(滑动),flick(轻 拂),pinch(捏合,拉伸),rotate(旋转);除了pinch,rotate手势外,其他手势事件的回调函数都会返回data['fingerNum']值,所以在回调函数中可以根据手指的数量来拼合其他的事件。

其中每个手势事件都会返回响应的回调函数,接受回调函数的参数值一般定义为evt和data,可自行设定。

  • 其中swipe和flip可以返回方向data['direction']以及左右,上下移动的距离data['x'],data['y'],swipe事件结束会返回状态值data['status'] ==  end;
  • pinch会返回type信息,即in和out,来判断向里还是向外压缩或者拉伸;返回data['scale']表示缩放比例;
  • rotate同样会有direction信息来简单判断向左旋转亦或向右旋转,同时返回data['rotation']作为角度信息;
  • 每个手势事件都有相应的event对象返回,其中pinch和rotate返回的与其他的event对象是不同的,这两个返回的是gesturechange的事件对象,(详细信息可以在debug模式下调试查看)

jTouch的使用

  1. 实例化
    var objTouch = document.getElementById('touch');
    var Touches = JTouch(objTouch);
  2. 采用链式写法,

    Touches.on('手势名称',function(evt,data){
    //回调函数部分
    })

  3. 回调函数中返回相应的值

JTouch的示例

http://liutian1937.github.io/JTouch/carousel.html

触摸平滑移动,其中用到了单独封装的translate插件,时间有限代码略显粗糙,各位看官见谅。

http://liutian1937.github.io/JTouch/touch.html

稍微仿了下ipad的界面效果,有太多不足支持。长按可以触发icon抖动,双击空白取消效果,但是取消效果过程会产生抖动,希望哪位高人提点意 见。其中想到了用-webkit-animation-play-state:paused;来实现,但是具体如何让动画停在第一帧不甚了解。

另外做了个简单的图像效果,这个效果的flick效果还没有强化,关于这个效果我感觉我实现的复杂了一些,但是暂时没有想到万全之策,所以里面出现了不少的参数,哪位高人见到可以优化之。大家可以根据这个效果扩展成一个相册效果。具有左右翻的效果。


更新记录:

v1.1更新记录:

命名jTouch -> JTouch
实例化不需要new,直接JTouch
加入鼠标手势操作,鼠标可以实现tap.doubletap,swipe,hold,flip操作,可以用mousewheel模拟pinch
加入init(),destory()功能来实现重置和销毁
不足:手头没有win8的平板,暂时没有实现ie10的触控手势

Javascript触屏手势库-JTouch(更新V1.1)的更多相关文章

  1. JavaScript触屏滑动API介绍

    随着触屏手机.平板电脑的普及和占有更多用户和使用时间,触屏的触碰.滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为 ...

  2. hammerjs wabapp h5 触屏手势一网打尽

    hammerjs官网    http://hammerjs.github.io/ 学习文章1 http://www.cnblogs.com/vajoy/p/4011723.html 学习文章2 htt ...

  3. zTouch-移动端触屏开发利器(zepto touch扩展)

    * Zepto.js v1.0.1 touch extend (Zepto.js v1.0.1 的swipe touch扩展)js-处理手机移动端web触屏手势动作. Zepto.js v1.0.1版 ...

  4. 移动终端学习2:触屏原生js事件及重力感应

    如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...

  5. WPF Multi-Touch 开发:高级触屏操作(Manipulation)

    原文 WPF Multi-Touch 开发:高级触屏操作(Manipulation) 在上一篇中我们对基础触控操作有了初步了解,本篇将继续介绍触碰控制的高级操作(Manipulation),在高级操作 ...

  6. 强悍的javascript手势库

    /** * Toucher * git:https://github.com/cometwo/Toucher-1 */ "use strict"; (function (root, ...

  7. Bootstrap幻灯轮播如何支持触屏左右滑动手势?

    最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...

  8. 实现一个javascript手势库 -- base-gesture.js

    现在移动端这么普及呢,我们在手机上可以操作更多了.对于网页来说实现一些丰富的操作感觉也是非常有必要的,对吧(如果你仅仅需要click,,那就当我没说咯...)~~比如实现上下,左右滑动,点击之类的,加 ...

  9. javascript如何判断访问网页的设备及是否支持触屏功能

    var system ={}; var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac ...

随机推荐

  1. SQL分页小Demo

    SELECT @TotalCount=count(1) FROM TableA A WITH(NOLOCK) INNER JOIN TableB B WITH(NOLOCK) ON A.Id=B.Id ...

  2. 初试jQuery EasyUI

    jQuery EasyUI jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要 ...

  3. go和swift

    你生命中的有些东西终究会失去,比如我住了6年的陈寨,这个聚集了郑州十几万IT民工的地方,说拆就拆了.再比如我玩了3年的坦克英雄,这个带给我太多快乐的游戏,说停就停了. 编程对我而言是种爱好,我上学6年 ...

  4. iOS狂暴之路---iOS的第一个应用中能学到哪些知识

    一.前文回顾 在之前已经介绍了 iOS的学习路线图,因为中间遇到一些Android开发问题,所以就耽搁了一段时间,那么接下来的这段时间我们将继续开始iOS的狂暴之路学习,按照国际惯例,第一个应用当然是 ...

  5. centos7 更改语言

    vim /etc/locale.conf 修改 LANG="en_US.UTF-8"

  6. Balsamiq Mockups

    Balsamiq Mockups完全手册 2010.03.18 发布 48,066 浏览 什么是Balsamiq Mockups Balsamiq Mockups出自加利福尼亚州的Balsamiq工作 ...

  7. Bluestacks 安卓模拟器利器

    蓝手指测试安卓比较给力,尤其含有安卓原生态的多语言是现在厂商手机所无法提供了的.   但是有一点需要注意:BlueStack的日志文件非常大,日志目录默认是%Sysem Dir%/Program Da ...

  8. window—BAT脚本

    bat脚本注释方法: 1.:: 注释内容(第一个冒号后也可以跟任何一个非字母数字的字符) 2.rem 注释内容(不能出现重定向符号和管道符号) 3.echo 注释内容(不能出现重定向符号和管道符号)〉 ...

  9. bzoj 3632: 外太空旅行 最大团

    3632: 外太空旅行 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 389  Solved: 129[Submit][Status] Descript ...

  10. dispatch_semaphore

    dispatch_semaphore 信号量基于计数器的一种多线程同步机制.在多个线程访问共有资源时候,会因为多线程的特性而引发数据出错的问题. dispatch_queue_t queue = di ...