JS实现生成会变大变小的圆环的方法介绍

本文实例讲述了js实现生成会变大变小的圆环。分享给大家供大家参考。具体如下：

这里使用javascript生成圆环，会变大变小，对于研究如何利用JavaScript生成动画效果，这是个很好的范例。

运行效果如下图所示：

北方供求商业完整版

专业的供求、二手、分类信息发布系统，功能介绍：HTML生成功能：发布信息自动生成相关列表，不必全部生成多功能图文编辑器：让你的信息更灵活多变，可添加图片水印强大的管理员权限分配：可管理某一个分类，或地区的信息强大JS功能：方便远程调用个人开店，企业黄页一步到位：每个会员都拥有自己的店铺，企业会员可加入到企业黄页集成支付宝在线支付v3.5 Build 0717更新修正了会员编辑信息的一处BUG，以前

下载

具体代码如下：

zuojiankuohaophpcn!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
zuojiankuohaophpcnhtml xmlns="http://www.w3.org/1999/xhtml">
zuojiankuohaophpcnhead>
zuojiankuohaophpcnstyle>
#p1 {width:2px; height:2px; position:absolute; background:red; left:150px; top:200px;}
p {width:3px; height:3px; position:absolute; background:black;}
zuojiankuohaophpcn/style>
zuojiankuohaophpcntitle>JS圆环zuojiankuohaophpcn/title>
zuojiankuohaophpcnscript type="text/javascript">
var n=30;
var r=100;
var a=true;
window.onload=function ()
{
 var op1=document.getElementById("p1");
 var ap=[];
 var op=null;
 var j=0;
 var i=0;
 for(i=0;izuojiankuohaophpcnn;i++)
 {
  op=document.createElement("p");
  ap.push(op);
  document.body.appendChild(op);
 }
 calcDrg();
 function calcDrg()
 {
  for(i=0;izuojiankuohaophpcnn;i++)
  {
   var degress=360*i/n+j;
   var a=Math.sin(degress*Math.PI/180)*r;
   var b=Math.cos(degress*Math.PI/180)*r;
   ap[i].style.left=op1.offsetLeft+b+"px";
   ap[i].style.top=op1.offsetTop-a+"px";
  }
 }
 setInterval(function (){
  j++;
  var s=0.3;
  a?r-=s:r+=s;
  if(rzuojiankuohaophpcn=0 || r>=100)
  {
   a=!a;
  }
  calcDrg();
 }, 10);
};
zuojiankuohaophpcn/script>
zuojiankuohaophpcn/head>
zuojiankuohaophpcnbody>
zuojiankuohaophpcnp id="p1">
zuojiankuohaophpcn/p>
zuojiankuohaophpcn/body>
zuojiankuohaophpcn/html>