物体旋转效果实现步骤:
1、获得物体的圆心的坐标(Ox,Oy)
2、设定每次走的角度 J = 0.01
3、初始角度值 a = 0
4、执行动画函数 setInterval(move,70)
5、每走固定J个角度 获得旋转物体将要到达坐标点
代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style type="text/css">
#a{ position:absolute; top:300px; left:400px; 20px; height:20px; background:#000; border:1px #F00 solid;}
#b{ position:absolute; 50px; height:50px; background:#060; border:1px #000 solid; left:385px; top:100px;}
</style>
<body>
<div>
<div id="a"></div>
<div id="b"></div>
</div>
<script type="text/javascript">
var wai =document.getElementById('b'); //转的物体
var xin= document.getElementById('a'); //圆心
var Ox=0,Oy=0,R=200,Bx,By,J = 0.1,a = 0;
Ox = xin.offsetLeft + 10;//圆心的坐标
Oy = xin.offsetTop + 10;
clearInterval(interval);
var interval = setInterval(move, 100);
function move()
{
a = a + J;
var Ex =Ox+ parseInt(Math.cos(a)*R);
var Ey =Oy+ parseInt(Math.sin(a)*R);
wai.style.left = Ex;
wai.style.top = Ey;
if(a>=360)
{a = 0;
//clearInterval(interval);
}
}
</script>
</body>