改动内容:改动了缩放或者扩大后元素溢出边框的BUG,获取了缩放或者扩大的区间值进行计算,详细区别能够看上一篇博客对照一下代码就知道了。
222
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>