循環(huán)流動(dòng)小球
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>循環(huán)流動(dòng)小球</title>
<style type="text/css">
#div {
width: 100px;
;
height: 100px;
background: red;
border-radius:50% ;
position: absolute;
}
</style>
<script type="text/javascript">
//js動(dòng)畫原理:修改標(biāo)簽css屬性，從而達(dá)到讓標(biāo)簽在視覺(jué)上有運(yùn)動(dòng)的效果的目的
//js動(dòng)畫用cpu渲染執(zhí)行，比較耗損硬件資源，而css動(dòng)畫不完全依賴cpu渲染，所以性能上比js動(dòng)畫高。
//window.onload表示dom元素全部加載完畢時(shí)觸發(fā)
window.onload = function() {
var div = document.getElementById("div");
var html = document.getElementsByTagName("html")[0];
//元素在界面上移動(dòng)是以1像素為單位，如果速度之為小數(shù)的話，則以四舍五入來(lái)取整
//em單位:相對(duì)于父標(biāo)簽字體尺寸，1em=父標(biāo)簽 的字體像素，默認(rèn)的字體為16px
//px單位：相對(duì)于屏幕分辨率
var speed = 4;
var timer = setInterval(function() {
//動(dòng)畫算子：用來(lái)控制動(dòng)畫運(yùn)動(dòng)速度的一種算法
/*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>
來(lái)源： http://10.0.88.88:8083/forum.php?mod=viewthread&tid=43756
