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>