移动端单指拖 双值旋转缩放(改动版)
改动内容:改动了缩放或者扩大后元素溢出边框的BUG,获取了缩放或者扩大的区间值进行计算,详细区别能够看上一篇博客对照一下代码就知道了。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>222</title> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"> <style> *{ margin:0; padding:0; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; } div{ width:100%; font-size:18px; } #pic{ -webkit-transform-origin:center center; } title{ display: none; } body{ width:100%; height:100%; position: relative; } </style> </head> <body> <img src="5.png" id="pic" alt="" width="200" height="200"> </body> <script src="hammer.min.js"></script> <script> !(function(win,doc){ var pic=doc.getElementById("pic"); var mc=new Hammer.Manager(pic); var pinch=new Hammer.Pinch(); var rotate=new Hammer.Rotate(); var pan=new Hammer.Pan(); pinch.recognizeWith(rotate); mc.add([pinch,rotate,pan]); mc.get('pan').set({direction:Hammer.DIRECTION_ALL}); var pan_ex=pan_ey=rota_ex=pex3=pey3=0,pin_sl=1; /** * 获取到浏览器窗体的距离 * @param {[type]} elm [description] * @return {[type]} [description] */ function getpos(elm){ var x1=0,y1=0; while(elm.nodeName!="BODY"){ x1+=elm.offsetLeft; y1+=elm.offsetTop; elm=elm.offsetParent; } return {"x":x1,"y":y1} } /**获取设置网页宽度 * [w description] * @type {[type]} */ var w=doc.documentElement.scrollWidth<win.innerWidth?win.innerWidth:doc.documentElement.scrollWidth; h=doc.documentElement.scrollHeight<win.innerHeight?
win.innerHeight:doc.documentElement.scrollHeight, getx=getpos(pic).x, gety=getpos(pic).y; /** * *单指拖动 * @param {[type]} ev [description] * @return {[type]} [description] */ mc.on("panmove", function(ev) { var pan_mx=ev.deltaX+pan_ex, pan_my=ev.deltaY+pan_ey; //变大变小之后计算位移防止超过边框 if(pan_mx<0&&getx-Math.abs(pan_mx-pex3/2)<0){ pan_mx=-(getx-pex3/2); }else if(pan_mx>0&&(getx+(pan_mx-pex3/2)+pic.offsetWidth)>(w)){ pan_mx=w-pic.offsetWidth-getx-pex3/2; } if(pan_my<0&&gety-Math.abs(pan_my-pey3/2)<0){ pan_my=-(gety-pey3/2); }else if(pan_my>0&&gety+(pan_my-pey3/2)+pic.offsetHeight>(h)){ pan_my=h-pic.offsetHeight-gety-pey3/2; } //设置元素变形值 pic.style.webkitTransform="translate3d("+pan_mx+"px,"+pan_my+"px,0) scale3d("+pin_sl+","+pin_sl+",1) rotate3d(0,0,1,"+rota_ex+"deg)"; pic.style.webkitTransformOrigin=(pan_mx+100)+"px "+(pan_my+100)+"px;"; mc.on("panend", function(ev) { pan_ex=pan_mx; pan_ey=pan_my; }); ev.preventDefault(); }); //双指拉伸旋转 mc.on("pinchstart rotatestart", function(ev) { var pinch_sa=ev.scale; var rota_sx=ev.rotation; mc.on("pinchmove rotatemove", function(ev) { pin_ml=ev.scale-pinch_sa+pin_sl; rota_mx=ev.rotation-rota_sx+rota_ex; pic.style.webkitTransform="translate3d("+pan_ex+"px,"+pan_ey+"px,0) scale3d("+pin_ml+","+pin_ml+",1) rotate3d(0,0,1,"+rota_mx+"deg)"; mc.on("pinchend rotateend", function(ev) { pin_sl=pin_ml; rota_ex=rota_mx; //计算拉伸之后的区间值 if(ev.type=="rotateend"){ pex3=pin_ml*pic.offsetWidth-(pic.offsetWidth); pey3=pin_ml*pic.offsetHeight-(pic.offsetHeight); } }); ev.preventDefault(); }); ev.preventDefault(); }); })(window,document) </script> </html>