基于JS实现生成会变大变小的圆环例子演示，下面使用javascript生成圆环，会变大变小，对于研究怎么样利用JavaScript生成动画效果，这是个很好的示例。
运行效果如下图所示：
具体代码如下：
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style>#div1 {width:2px; height:2px; position:absolute; background:red; left:150px; top:200px;}div {width:3px; height:3px; position:absolute; background:black;}</style><title>JS圆环</title><script type="text/javascript">var
n=30;var
r=100;var
a=true;window.onload=function
(){var
oDiv1=document.getElementById('div1');var
aDiv=[];var
oDiv=null;var
j=0;var
i=0;for(i=0;i<n;i++){oDiv=document.createElement('div');aDiv.push(oDiv);document.body.appendChild(oDiv);}calcDrg();function
calcDrg(){for(i=0;i<n;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;aDiv[i].style.left=oDiv1.offsetLeft+b+'px';aDiv[i].style.top=oDiv1.offsetTop-a+'px';}}setInterval(function
(){j++;var
s=0.3;a?r-=s:r+=s;if(r<=0 || r>=100){a=!a;}calcDrg();}, 10);};</script></head><body><div id="div1"></div></body></html> |