循環流動小球
<!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
