js hammer移动端web手势放大图片

墨蓝 2022-08-06 09:13 200阅读 0赞

**通过hammer插件，在手机上用手指放大图片，缩小图片，拖动，单击，双击等**

部分代码：

var log = null;
        var el=document.querySelector("#_imgID");//获取你想要放大的图片<img>标签id
    	//var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);//居中
       // var  START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2);
    	var START_X =0;//后来发现，出现位置设为0才居中
    	var  START_Y=0;
        var ticking = false;
        var transform;
        var timer;
        var mc = new Hammer.Manager(el);
    
        mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
    
        mc.add(new Hammer.Swipe()).recognizeWith(mc.get('pan'));
        mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
        mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
    
        mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
        mc.add(new Hammer.Tap());
    
        mc.on("panstart panmove", onPan);//拖动事件
       // mc.on("rotatestart rotatemove", onRotate);//旋转事件
        mc.on("pinchstart pinchmove", onPinch);//放大缩小事件
        mc.on("swipe", onSwipe);
        mc.on("tap", onTap);//单击
        mc.on("doubletap", onDoubleTap);//双击
    
        mc.on("hammer.input", function(ev) {
            if(ev.isFinal) {//判断是否离开，或者事件结束
                //resetElement();//�ָ�
            	START_X=transform.translate.x;//把当前拖动到的坐标赋值给中间变量
    		    START_Y=transform.translate.y;
            }
        });

附件地址： [点击打开下载链接][Link 1]

[Link 1]: http://download.csdn.net/detail/klx502/8379335

发表评论取消回复

表情：

评论列表（有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS_向你的web应用程序添加触摸手势，Hammer.js

hammer.js [官方文档：http://hammerjs.github.io/][http_hammerjs.github.io] CDN：http://h

拼搏现实的明天。/ 2022年10月17日 04:19/ 0 赞/ 95 阅读

相关 hammer.js实现移动端的拖放效果

hammer.js可以实现移动端的多种触摸效果。详细可以点击[http://www.cnblogs.com/iamlilinfeng/p/4239957.html][http_

川长思鸟来/ 2022年08月08日 06:55/ 0 赞/ 226 阅读

相关 js hammer移动端web手势放大图片

通过hammer插件，在手机上用手指放大图片，缩小图片，拖动，单击，双击等部分代码： var log = null; var el=documen

墨蓝/ 2022年08月06日 09:13/ 0 赞/ 201 阅读

相关 html5移动端手势事件

第1章事件参照表 <table> <thead> <tr> <th align="left">事件</th> <th align="left"

快来打我*/ 2022年07月28日 10:50/ 0 赞/ 264 阅读

相关 Hammer.js

![ad.png][] 一、前言移动端框架当前还处在初级阶段，但相对于移动端的应用来说已经有很长时间了。虽然暂时还没有PC端开发的需求量大，但移动端的Web必然是一种

「爱情、让人受尽委屈。」/ 2022年03月31日 12:38/ 0 赞/ 185 阅读

相关 hammer.js – 多点触摸手势库

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] [hammer.js][] 是一个多点触摸手势库，能够为

古城微笑少年丶/ 2022年01月14日 18:39/ 0 赞/ 310 阅读

相关【移动端】学习移动端的滑动手势事件

1.判断滑动的手势条件触发touchmove事件移动的超过一定的距离，如10px，像滑动了1px，2px这类的距离太小，不能视为滑动 <!DOCT

红太狼/ 2022年01月06日 12:23/ 0 赞/ 379 阅读

相关 JS图片放大缩小

HTML部分代码 <img class="alert_img" onmousewheel="return suofang(this)" style="max-widt

我就是我/ 2021年08月29日 19:30/ 0 赞/ 596 阅读

相关移动端手势库

1：GMU:http://cloudajs.org/ui/brand/gmu GMU是基于zepto的mobile UI组件库，提供webapp、pa

墨蓝/ 2021年07月24日 17:26/ 0 赞/ 502 阅读

相关移动端原生手势事件

touchstart 当手指接触屏幕时触发 touchmove 当已经接触屏幕的手指开始移动的时候触发 touchend 当手指离开屏幕时触发

怼烎@/ 2021年07月24日 14:04/ 0 赞/ 487 阅读