萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 用JavaScript實現動畫效果的方法

用JavaScript實現動畫效果的方法

大家在使用Dreamweaver中的時間線功能或以做出很有趣的動畫效果,Dreamweaver會自動為用戶生成特定的程序代碼,大家有沒有想過動畫的實現原理呢?  

其實原理是很簡單的,主要是使用了一個計時器函數,下面我為大家
演示一個簡單的動畫的制作過程,通過有關的介紹,大家可以舉一反三,做出更多很炫的動畫效果。
這個實例的效果是點擊網頁上的“開始移動”按鈕,則其中的指定圖層就會從左到右移動,在這個過程中你點擊“停止移動”按鈕就會停止移動。

復制代碼 代碼如下:
<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)函數來取消計時器。

copyright © 萬盛學電腦網 all rights reserved