<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { width: 500px; margin: 0 auto; } </style> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <div class="box"> <img src="../canvas/1.png" /> </div> <script src="hammer.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var oImg = document.querySelector("img"); var oBox = document.querySelector(".box"); var hammer = new Hammer(oBox); var oImg = new Hammer(oImg); oImg.get(‘pan‘).set({ direction: Hammer.DIRECTION_ALL }); oImg.on("panstart", function(event) { var left = oImg.offsetLeft; var tp = oImg.offsetTop; oImg.on("panmove", function(event) { oImg.style.left = left + event.deltaX + ‘px‘; oImg.style.top = tp + event.deltaY + ‘px‘; }); }) hammer.get(‘pinch‘).set({ enable: true }); hammer.on("pinchstart", function(e) { hammer.on("pinchout", function(e) { oImg.style.transition = "-webkit-transform 1000ms ease-out"; oImg.style.webkitTransform = "scale(2.5)"; }); hammer.on("pinchin", function(e) { oImg.style.transition = "-webkit-transform 1000ms ease-out"; oImg.style.webkitTransform = "scale(1)"; }); }) </script> </body> </html>
原文：https://www.cnblogs.com/150536FBB/p/9787528.html