阿瑟 發表
其實要自己寫一隻網頁動態特效, 把Javascript教學區的教學文章看完一定足夠, 您只要記得, 動態的效果百分之八九十都是用setTimeout()達成的!
小弟這次用一個物理模擬範例來講解Javascript動態效果的寫作基本概念
<HTML>
<BODY onLoad="drop(0);">
<DIV id="physics" style="POSITION:absolute;">
O
</DIV>
<DIV id="boo" style="float:right">
</DIV>
<script language="javascript">
maxheight = document.body.clientHeight - 50;
speed = 20;
function drop(x)
{
physics.style.left = x*speed;
physics.style.top = (9.8*(x*x))/2;
boo.innerHTML = "總共" + x + "秒" + "<br>" + "最遠垂直距離: "
+ parseInt(physics.style.top) + " 公尺<br>最遠水平距離: "
+ parseInt(physics.style.left) + " 公尺<br>" + "水平初速度: "
+ speed + "公尺/秒";
x++;
if(parseInt(physics.style.top) < maxheight)
action = setTimeout("drop(" + x + ")",100);
}
</script>
</BODY>
</HTML>
|
小弟將上面的語法逐一講解:
<DIV id="physics" style="POSITION:absolute;">
O
</DIV>
先執行一下您的範例, 你會看到一個圓球從上拋下, 這個DIV標籤產生的就是那個圓球, 其id為physics, 由於該圓球會隨著時間移動, 因此必須將該物件樣式的POSITION屬性設定為Absolute.
<DIV id="boo" style="float:right">
</DIV>
這隻程式有一個數據區塊, 紀錄高度與長度等數據, 這個DIV區塊就是用來顯示數據的.
再來就要看看Javascript的部分了...
maxheight = document.body.clientHeight - 50;
speed = 20;
這是兩個變數, maxheight為高度極限值, speed為水平的拋射速度, document.body.clientHeight則是畫面的最大高度, 減掉50是避免球超乎畫面. 這樣運算出來的maxheight是離畫面最底端50像素的高度.
接下來看function drop()...
physics.style.left = x*speed;
由於是水平拋射, 水平速度不會改變, x為秒, 因此時間*速度 = 距離.
physics.style.top = (9.8*(x*x))/2;
垂直的部分由於受到地心引力影響, 公式為垂直距離 = (9.8*(x*x))/2, x為秒.
下面那一個boo.innerHTML是顯示每過一秒的垂直與水平數據
if(parseInt(physics.style.top) < maxheight)
action = setTimeout("drop(" + x + ")",100);
由於physics.style.top回傳一個字串, 因此必須用parseInt來取得其數值. 這個if/else的作用就是, 當球還在螢幕最大高度以內 (也就是還沒到螢幕最底端), 就執行下一個動作..
整體的程式邏輯其實不難, drop(x)這個函式有參數x, 代表一秒, 而每當x增加的時候, 球的位置就會繼續移動, 如果球尚未超出最大高度, 就用setTimeout()再執行下一秒的drop(x). 如此將每一秒的動作串起來, 就可以看到一個拋射的動畫了.
由於這只是一個模擬, 因此小弟將一公尺化成一像素, 並且將一秒化成1/10秒, 這也是為什麼setTimeout()中的時間小弟設定為100微秒而不是1000微秒, 這部分要注意一下.