首页 > 建站教程 > CSS3+HTML5 >  svg练习:来回弹动的小球正文

svg练习:来回弹动的小球


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>