js常用插件(二)之移动端手势利器hammer单双指操作

js常用插件之hammer单双指操作

欢迎点击: 个人官网博客

移动端手势利器：

先引用cdn或自己下载下来

<script src="https://cdn.bootcdn.net/ajax/libs/hammer.js/2.0.8/hammer.js"></script>

使用方法

   //要操作的元素
  var hammertime= new Hammer(document.getElementById('test'));
  //直接调用就可以
  //比如写了pan就是该元素可以拖动平移，没有就拖动不了，以此类推
    hammertime.on('pinch,pan panmove swipe swipeup press pressup', function (ev) {
    
    
       //回调
       console.log(ev);
    });

打印出来的ev里面主要有：

其他一些事件：

tap<点>,
doubletap<双点击>,
press<按住>, pressup
pan<平移>
panstart: 拖动开始
panmove: 拖动过程
panend: 拖动结束
pancancel: 拖动取消
panleft: 向左拖动
panright: 向右拖动
panup: 向上拖动
pandown: 向下拖动
swipe<快速滑动>
swipeleft: 向左滑动
swiperight: 向右滑动
swipeup: 向上滑动
swipedown: 向下滑动
pinch<捏拿缩放>
pinchstart: 多点触控开始
pinchmove: 多点触控过程
pinchend: 多点触控结束
pinchcancel: 多点触控取消
pinchin: 多点触控时两手指越来越近
pinchout: 多点触控时两手指越来越远
rotate<旋转>
rotatestart: 旋转开始
rotatemove: 旋转过程
rotateend: 旋转结束
rotatecancel: 旋转取消

注意：hammerjs一开始是不自带缩放，旋转功能的，需要手动添加

 hammertime.add(new Hammer.Pinch())
 hammertime.add(new Hammer.Rotate())
 hammertime.on("pinch rotate", function (ev) {
    
       
        console.log('旋转=>', ev.rotation, '缩放=>', ev.scale)
    });

尽量手机打开，不然查看不了旋转，缩放等双指效果

demo查看

基于hamme已经封装好的手势插件