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>