svg练习：来回弹动的小球_CSS3教程,CSS3动画教程,HTML5教程,HTML5+教程,HTML5 PLUS教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

SVG小球

一个小东西，来回弹动的小球，用SVG写的，很简单，原理就是用 line 画一个线，然后用定时器不断更改用 circle 画的蓝色小球的 X 和 Y 坐标，当坐标超出线的端点，再让他反方向跑。

html代码：

01<svg width="500" height="500">
02    <!--顶点小圆-->
03    <circle cx="10" cy="10" stroke="red" stroke-width="2" r="5" fill-opacity="0" />
04    <!--末点小圆-->
05    <circle cx="450" cy="450" stroke="red" stroke-width="2" r="5" fill-opacity="0" />
06    <!--线条-->
07    <line x1="10" y1="10" x2="450" y2="450" stroke="#ccc" stroke-width="2" />
08    <!--来回晃动的小圆-->
09    <circle id="myCircle" cx="10" cy="10" stroke="blue" stroke-width="2" r="3" fill="blue" />
10</svg>

js代码：

01<script>
02var oCircle = document.getElementById("myCircle");
03var i=10;
04var auto=null;
05//定义小球向下跑的函数
06function move(){
07    i++;
08    if(i>450){
09        //当小球跑到最底端，停止向下跑，开始往上跑
10        clearInterval(auto);
11        auto = setInterval(move2,5);
12    }
13    oCircle.setAttribute("cx",i);
14    oCircle.setAttribute("cy",i);
15}
16//定义小球往上跑的函数
17function move2(){
18    i--;
19    if(i<9){
20        //当小球跑到最顶端，停止往上跑，开始往下跑
21        clearInterval(auto);
22        auto = setInterval(move,5);
23    }
24    oCircle.setAttribute("cx",i);
25    oCircle.setAttribute("cy",i);
26}
27auto = setInterval(move,5);
28</script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

svg练习：来回弹动的小球

猜你喜欢