jquery实现圆点绕圆心循环转动

来源：互联网发布：windows 做磁盘条带化编辑：程序博客网时间：2024/05/01 06:59

源代码：

<!DOCTYPE html><html><head></head><style>.item{background:red;border-radius:10px;height:10px;width:10px;        position: absolute;}.circle{border:1px solid blue;border-radius:100px;height:100px;width:100px;position: absolute;top:100px;left:100px;}.circle2{border:1px solid blue;border-radius:100px;height:200px;width:200px;position: absolute;top:50px;left:50px;}.circle3{border:1px solid blue;border-radius:300px;height:300px;width:300px;position: absolute;top:0px;left:0px;}#centre{top:145px;left:145px;}#point{top:95px;left:145px;}#point2{top:45px;left:145px;}#point3{top:-5px;left:145px;}</style><body>     <div id="point" class="item"></div>    <div id="centre" class="item"></div>    <div class="circle"></div><div class="circle2"></div><div class="circle3"></div><div id="point2" class="item"></div><div id="point3" class="item"></div></body></html><script src="/jquery/jquery-1.11.1.min.js"></script><script>//var obj = document.getElementById('point');var a=0;function cc(){a=a+0.01;var y=145-50*Math.cos(a);var x=145+50*Math.sin(a);$("#point").css({"top":y,"left":x});$("#point2").css({"top":x*2-145,"left":y*2-145});$("#point3").css({"top":y*3-290,"left":x*3-290});}setInterval(cc,6);</script>

0 0