首頁 > 開發者 > 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)函數來取消計時器。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
