飘动的圆-svg版

最新推荐文章于 2025-07-22 15:05:23 发布

-布谷鸟-

最新推荐文章于 2025-07-22 15:05:23 发布

阅读量212

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/cuckoo1/article/details/83715410

javascript 专栏收录该内容

48 篇文章

订阅专栏

多年前写了一个vml版的，现在改为svg版。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG Hello World</title>
</head>
<body>
<p onclick=movetox()>A Sin waving Circle...
<svg id='glc' xmlns="http://www.w3.org/2000/svg" version="1.1" width="1200" height="900">
</svg>

<span id='status'></span>
<script>
   var r = 200;
   var pi = Math.PI;
   var aa = 0;
   var a=0;

   var gid = document.getElementById("glc");
var csvg;

for(var a0=0;a0<=360*2;a0=a0+10)
{
aa = 2 * a0 * pi / 360;
kx=20+a0*1;
ky=250 + 100*Math.sin(aa);
csvg = document.createElementNS('http://www.w3.org/2000/svg','circle');

   csvg.setAttribute('id','_glc0'+a0);
   csvg.setAttribute('cx',kx);
   csvg.setAttribute('cy',ky);
   csvg.setAttribute('r',30);
   csvg.setAttribute('stroke','blue');
   csvg.setAttribute('stroke-width',2);
   csvg.setAttribute('fill','blue');
   gid.appendChild(csvg);

//console.log(kx,ky);
}

var gst = document.getElementById("status");

function movetox() {

gst.innerText=""+a+"-"+new Date().toLocaleString();

for(var jj=0;jj<=360*2;jj=jj+10){
obj2=eval("_glc0"+jj);
ab = 2*(a+jj) * pi / 360;
var yy=250+150 * Math.sin(ab);

obj2.setAttribute('cy',yy);
}
a=a+10;
if(a>=360*1) a = 0;
theTime = setTimeout("movetox()", 100);

}
</script>
<br/>
<br/>
</body>
</html>