迟到的春天

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

物体旋转效果实现步骤:

1、获得物体的圆心的坐标(Ox,Oy)

2、设定每次走的角度 J = 0.01

3、初始角度值 a = 0

4、执行动画函数 setInterval(move,70)

5、每走固定J个角度 获得旋转物体将要到达坐标点

 

代码如下:

代码

<style type="text/css">
#a{ position:absolute; top:300px; left:400px; width:20px; height:20px; background:#
000; border:1px #F00 solid;}
#b{ position:absolute; width: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>

 

posted on 2010-07-01 13:20  维美启程  阅读(261)  评论(1编辑  收藏  举报