循环流动小球
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>循环流动小球</title>
<style type="text/css">
#div {
width: 100px;
;
height: 100px;
background: red;
border-radius:50% ;
position: absolute;
}
</style>
<script type="text/javascript">
//js动画原理:修改标签css属性，从而达到让标签在视觉上有运动的效果的目的
//js动画用cpu渲染执行，比较耗损硬件资源，而css动画不完全依赖cpu渲染，所以性能上比js动画高。
//window.onload表示dom元素全部加载完毕时触发
window.onload = function() {
var div = document.getElementById("div");
var html = document.getElementsByTagName("html")[0];
//元素在界面上移动是以1像素为单位，如果速度之为小数的话，则以四舍五入来取整
//em单位:相对于父标签字体尺寸，1em=父标签 的字体像素，默认的字体为16px
//px单位：相对于屏幕分辨率
var speed = 4;
var timer = setInterval(function() {
//动画算子：用来控制动画运动速度的一种算法
/*speed = speed - 0.01;
if(speed <= 1) {
speed = 1;
clearInterval(timer)
}*/
//console.log(div.offsetTop)
if(div.offsetLeft < 500 && div.offsetTop == 8) {
div.style.left = div.offsetLeft + speed + "px"
}
if(div.offsetLeft >=500) {
div.style.left = "500px"
div.style.top = div.offsetTop + speed + "px";
}
if(div.offsetTop >= 500) {
div.style.top = "500px"
div.style.left = div.offsetLeft + speed * -1 + "px"
}if(div.offsetLeft<=8 )
div.style.top = div.offsetTop + speed*-1 +"px"
}, 1000 / 60);
}
</script>
</head>
<body>
<div id="div">
</div>
</body>
</html>
来源： http://10.0.88.88:8083/forum.php?mod=viewthread&tid=43756
