博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript触屏手势库-JTouch
阅读量:4618 次
发布时间:2019-06-09

本文共 1323 字,大约阅读时间需要 4 分钟。

Javascript触屏手势库-jTouch

 

Javascript触屏手势库-JTouch(请用平板设备查看demo)

Github地址: (大家可以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的示例

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

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

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

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

转载于:https://www.cnblogs.com/niumowang/archive/2013/05/21/JTouch.html

你可能感兴趣的文章
C#根据html生成PDF
查看>>
Neutron SDN 手动实现手册
查看>>
linux下core文件调试方法
查看>>
20个创意404错误页面设计的启示
查看>>
基础训练 芯片测试
查看>>
如何用命令将本地项目上传到git
查看>>
JavaScript 实现鼠标拖动元素
查看>>
js 模糊查询 (360接口)
查看>>
python+rabbitMQ实现生产者和消费者模式
查看>>
“模态”对话框和“后退”按钮
查看>>
关于javascript实现的网站页面侧边悬浮框"抖动"问题
查看>>
linux_命令格式和命令提示符
查看>>
Cocos2d-X-3.0之后的版本的环境搭建
查看>>
when case group by 的用法集合
查看>>
认识XmlReader
查看>>
JAVA学习Swing章节标签JLabel中图标的使用
查看>>
sqlserver,oracle,mysql等的driver驱动,url怎么写
查看>>
局部变量和static变量的区别
查看>>
IE下iframe不能正常加载,显示空白
查看>>
mysql服务性能优化—my.cnf配置说明详解
查看>>