移动端双指旋转

最新推荐文章于 2021-05-29 06:17:28 发布

weixin_30375247

最新推荐文章于 2021-05-29 06:17:28 发布

阅读量200

点赞数

原文链接：http://www.cnblogs.com/zhoufuwei/p/7600692.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端双指旋转</title>

var d=0;
oDiv.addEventListener('touchstart',function(ev){
var oldD=d;

function getD(ev){
var x1=ev.targetTouches[0].pageX;
var y1=ev.targetTouches[0].pageY;

var x2=ev.targetTouches[1].pageX;
var y2=ev.targetTouches[1].pageY;

var x=x2-x1;
var y=y1-y2;

var d=a2d(Math.atan2(y,x));

return d;
}

if(ev.targetTouches.length==2){
var downD=getD(ev);
}

document.addEventListener('touchmove',function(ev){
if(ev.targetTouches.length==2){
d=oldD+downD-getD(ev);

oDiv.style.WebkitTransform='rotate('+d+'deg)';
}
},false);

ev.preventDefault();
},false);
},false);
</script>
</head>
<body>
<div id="div1">DIV</div>
</body>
</html>

转载于:https://www.cnblogs.com/zhoufuwei/p/7600692.html

关注