萬盛學電腦網 >> 腳本專題 >> javascript >> 用JavaScript實現動畫效果的方法
用JavaScript實現動畫效果的方法
其實原理是很簡單的，主要是使用了一個計時器函數，下面我為大家
演示一個簡單的動畫的制作過程，通過有關的介紹，大家可以舉一反三，做出更多很炫的動畫效果。
這個實例的效果是點擊網頁上的“開始移動”按鈕，則其中的指定圖層就會從左到右移動，在這個過程中你點擊“停止移動”按鈕就會停止移動。
<html>
<head>
<title>JavaScript Motion Sample</title>
<script language="JavaScript">
var movingID = null;
var scrolling = false;
function startMove()
{
var left = eval(div1.style.left.replace("px", ""));
if (left < document.body.scrollWidth - 150)
div1.style.left = left + 1;
else
div1.style.left = 10;
movingID = setTimeout("startMove()", 10);
}
function stopMove()
{
clearTimeout(movingID);
}
</script>
</head>
<body>
<div id="div1" style="visibility:visible; position:absolute; left:10; top:10; z-index:1;">
<table bgColor="#FFFFCC" border="1"cellPadding="0" cellSpacing="0">
<tr>
<td>I can moving...</td>
</tr>
</table>
</div>
<br><br>
<input type="button" value="開始移動" onClick="startMove()">
<input type="button" value="停止移動" onClick="stopMove()">
</body>
</html>
這裡主要使用了一個叫setTimeout(function, interval)函數，這個函數的參數格式為：
第一個參數“function”為超時後調用的函數名，第二個參數“interval”為超時值，以微秒為單位。
注意一點是如果要停止這個計時器，必須保存調用這個setTimeout()函數後的返回值，通過clearTimeout(id)函數來取消計時器。
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved