jquery实现动态画圆

  今天自己在写插件过程做中找到的一个不错的知识。自己做了一个小例子。

  

复制代码 代码如下:

  <!doctype html>

  <html>

  <head>

  <meta charset="utf-8">

  <title>无标题文档</title>

  <!--脚本加载-->

  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  $(document).ready(function(e) {

  var a = 200, b = 200, r = 90, times = 0;

  setInterval(function flutter() {

  times += 0.1;

  var hudu = (2*Math.PI / 360) * 6 * times;

  var X = a + Math.sin(hudu) * r;

  var Y = b - Math.cos(hudu) * r    //  注意此处是“-”号,因为我们要得到的Y是相对于(0,0)而言的。

  //$(".sky_text").css({"left":X+"px","top":Y+"px"});

  $("body").append('<div style="position:absolute; left:'+X+'px; top:'+Y+'px; width:1px; height:1px; background:#00F;"></div>');

  if(times == 60){

  return;

  }

  }, 2);

  });

  </script>

  <style type="text/css">

  body,html{ padding:0; margin:0;}

  </style>

  </head>

  <body>

  <div style="position:absolute; left:198px; top:198px; width:4px; height:4px; background:#F00;"></div>

  </body>

  </html>