svg练习：来回弹动的小球

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

html代码：

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

js代码：

<script>
var oCircle = document.getElementById("myCircle");
var i=10;
var auto=null;
//定义小球向下跑的函数
function move(){
    i++;
    if(i>450){
        //当小球跑到最底端，停止向下跑，开始往上跑
        clearInterval(auto);
        auto = setInterval(move2,5);
    }
    oCircle.setAttribute("cx",i);
    oCircle.setAttribute("cy",i);
}
//定义小球往上跑的函数
function move2(){
    i--;
    if(i<9){
        //当小球跑到最顶端，停止往上跑，开始往下跑
        clearInterval(auto);
        auto = setInterval(move,5);
    }
    oCircle.setAttribute("cx",i);
    oCircle.setAttribute("cy",i);
}
auto = setInterval(move,5);
</script>

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