免費AI編程助手
JavaScript 動畫
2018-09-28 18:05 更新
動畫
你可以利用 JavaScript 創(chuàng)造一些復(fù)雜的運動，包括下面但不限于下面的：
- 煙花式
- 淡出效果
- 旋轉(zhuǎn)進入或者旋轉(zhuǎn)推出
- 整個頁面進入或者整個頁面出去
- 對象移動
這個教程將講解如何利用 JavaScript 創(chuàng)建一些基本的運動。
JavaScript 可以用來移動一些文檔對象模型元素(<img>, <div> 或者其他的 HTML 元素)在頁面附近，這個是通過一些邏輯等式或者函數(shù)來決定的。
JavaScript 提供如下的幾種比較常用的函數(shù)來進行動畫編程。
- setTimeout(function, duration)： 這個函數(shù)在規(guī)定的時間 duration 到達時，會調(diào)用參數(shù)中的函數(shù) function。
- setInterval(function, duration)： 這個方法調(diào)用了之后會清除所有 setTimeout() 函數(shù)設(shè)定的計時器。
JavaScript 能夠設(shè)置一系列文檔模型對象的屬性值，包括該對象在屏幕中的位置。你可以通過設(shè)置 top 和 left 等對象的屬性值，從而讓該對象放在屏幕中任何位置。如下是該語法的一個簡單例子：
// Set distance from left edge of the screen.
object.style.left = distance in pixels or points;
or
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points; 手動動畫
讓我們利用文檔對象模型的對象的屬性值實現(xiàn)一個簡單的動畫，JavaScript 的函數(shù)如下：
<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/attachments/image/wk/wkjavascript/html.gif" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>如下是對上面例子的解釋：
- 我們利用 JavaScript 的函數(shù) getElementById() 得到了文檔對象模型對象，接著把它賦值給一個全局變量 imgObj。
- 我們定義了一個初始化函數(shù) init() 用來初始化 imgObj 對象,初始化時設(shè)置了該對象的 position 和 left 屬性的值。
- 初始化函數(shù)在網(wǎng)頁窗口加載的時候被調(diào)用。
- 最后，我們調(diào)用 moveRight() 函數(shù)增加該對象到左邊邊界的距離為 10 個像素點。你也可以設(shè)置該對象到左邊的距離為負值。
自動動畫
在上面的例子中我們已經(jīng)看到如何讓一張圖片在每次點擊之后向右移動。我們可以通過利用 JavaScript 中的函數(shù) setTimeout() 讓它自動執(zhí)行這個操作：
<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop(){
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/attachments/image/wk/wkjavascript/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>這里我們增加了一些新的知識：
- moveRight() 函數(shù)通過調(diào)用 setTimeout() 函數(shù)設(shè)置 imgObj 對象的位置。
- 我們添加了一個新的函數(shù) stop() ，它的作用是用來清除 setTimeout() 函數(shù)設(shè)置的計時器和讓文檔對象處于它的初始位置。
伴隨鼠標(biāo)事件的翻轉(zhuǎn)
如下是一個簡單的例子演示由鼠標(biāo)事件引起的圖片翻轉(zhuǎn)：
<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type="text/javascript">
<!--
if(document.images){
var image1 = new Image(); // Preload an image
image1.src = "/images/html.gif";
var image2 = new Image(); // Preload second image
image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href="#" onMouseOver="document.myImage.src=image2.src;"
onMouseOut="document.myImage.src=image1.src;">
<img name="myImage" src="/attachments/image/wk/wkjavascript/html.gif" />
</a>
</body>
</html>讓我們來看看這里的不同點：
- 在加載這個網(wǎng)頁的時候，if 語句是否存在圖片對象。如果沒有有效的圖片對象，那么下面的語句塊不會被執(zhí)行。
- Image() 構(gòu)造方法創(chuàng)建和預(yù)加載一個新的圖片對象稱為 image1。
- src 屬性值被賦值為外部圖片文件的路徑名稱，即是 /images/html.gif。
- 同樣的方式，我們創(chuàng)建了 image2對象，并且給它賦值為 /images/http.gif。
- 符號 # 禁用鏈接，這樣瀏覽器中點擊該鏈接就不會發(fā)生跳轉(zhuǎn)。這個鏈接表示的是一個圖片。
- onMouseOver 事件句柄在用戶的鼠標(biāo)移動到鏈接上時會被觸發(fā)，同樣，用戶鼠標(biāo)離開圖片鏈接時會觸發(fā) onMouseOut 事件句柄。
- 當(dāng)鼠標(biāo)移動到圖片上時，HTTP 上的圖片就會從第一個變到第二個。用鼠標(biāo)離開圖片時，最開始的那副圖片就會被顯示。
- 當(dāng)鼠標(biāo)從圖片鏈接上離開時，初始的 html.gif 圖片會再次出現(xiàn)在屏幕上面。
以上內(nèi)容是否對您有幫助：
更多建議：