实现思路：我们都知道风车的旋转 那就借鉴一下 也就是说 首先要有一个中心点 让物体围绕着中心点去旋转这是最基本的，那么问题来了怎么获取中心点，顾名思义中心点就是一个物体最中间的的点 好比圆的圆心一样 怎么获取 假设一个块 宽100px高100px 那么他的中心点就是 高的二分之一 和宽的二分之一 交汇的点 那么他的坐标就是 这个块的中心点距离左边的距离和上边的的距离
还有几个点就是重头戏 如何实现旋转 ！！！
1.数学问题 ：既然要旋转那肯定有角度的事；
求他的弧度-用Math.atan2(y,x)；反正切，已知直角边求他的弧度
角度----------套公式-Math.atan2(y,x)*180/Math.PI;
2.css3里面有一个属性就是旋转rotete；
接下看代码实现；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>智能社-www.zhinegshe.com</title>
<style>
html,body{width:100%;height:100%; overflow:hidden;}
#box{width:200px;height:200px; background:#ccc; margin:100px auto;}
</style>
<script>
function a2d(n){
return n*180/Math.PI;
}
document.addEventListener('DOMContentLoaded',function(){
var oBox=document.getElementById('box');
var d=0;
document.addEventListener('touchstart',function(ev){
var oldD=d;
function getD(ev){
var x1=oBox.offsetWidth/2+oBox.offsetLeft;
var y1=oBox.offsetHeight/2+oBox.offsetTop;
var x2=ev.targetTouches[0].pageX;
var y2=ev.targetTouches[0].pageY;
var x=x2-x1;
var y=y1-y2;
var d=Math.atan2(y,x);//反正切；已知两个直角边，求斜角的弧度！
return a2d(d);
}
var downD=getD(ev);
oBox.innerHTML=downD;//求出来的是弧度!
document.addEventListener('touchmove',function(ev){
d=oldD+downD-getD(ev);
oBox.style.WebkitTransform='rotate('+d+'deg)';
},false)
},false);
},false);
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
网友评论