JavaScript 動(dòng)畫(huà)
2018-09-28 18:05 更新
動(dòng)畫(huà)
你可以利用 JavaScript 創(chuàng)造一些復(fù)雜的運(yùn)動(dòng)，包括下面但不限于下面的：
- 煙花式
- 淡出效果
- 旋轉(zhuǎn)進(jìn)入或者旋轉(zhuǎn)推出
- 整個(gè)頁(yè)面進(jìn)入或者整個(gè)頁(yè)面出去
- 對(duì)象移動(dòng)
這個(gè)教程將講解如何利用 JavaScript 創(chuàng)建一些基本的運(yùn)動(dòng)。
JavaScript 可以用來(lái)移動(dòng)一些文檔對(duì)象模型元素(<img>, <div> 或者其他的 HTML 元素)在頁(yè)面附近，這個(gè)是通過(guò)一些邏輯等式或者函數(shù)來(lái)決定的。
JavaScript 提供如下的幾種比較常用的函數(shù)來(lái)進(jìn)行動(dòng)畫(huà)編程。
- setTimeout(function, duration)： 這個(gè)函數(shù)在規(guī)定的時(shí)間 duration 到達(dá)時(shí)，會(huì)調(diào)用參數(shù)中的函數(shù) function。
- setInterval(function, duration)： 這個(gè)方法調(diào)用了之后會(huì)清除所有 setTimeout() 函數(shù)設(shè)定的計(jì)時(shí)器。
JavaScript 能夠設(shè)置一系列文檔模型對(duì)象的屬性值，包括該對(duì)象在屏幕中的位置。你可以通過(guò)設(shè)置 top 和 left 等對(duì)象的屬性值，從而讓該對(duì)象放在屏幕中任何位置。如下是該語(yǔ)法的一個(gè)簡(jiǎn)單例子：
// 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; 手動(dòng)動(dòng)畫(huà)
讓我們利用文檔對(duì)象模型的對(duì)象的屬性值實(shí)現(xiàn)一個(gè)簡(jiǎn)單的動(dòng)畫(huà)，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>如下是對(duì)上面例子的解釋?zhuān)?/p>
- 我們利用 JavaScript 的函數(shù) getElementById() 得到了文檔對(duì)象模型對(duì)象，接著把它賦值給一個(gè)全局變量 imgObj。
- 我們定義了一個(gè)初始化函數(shù) init() 用來(lái)初始化 imgObj 對(duì)象,初始化時(shí)設(shè)置了該對(duì)象的 position 和 left 屬性的值。
- 初始化函數(shù)在網(wǎng)頁(yè)窗口加載的時(shí)候被調(diào)用。
- 最后，我們調(diào)用 moveRight() 函數(shù)增加該對(duì)象到左邊邊界的距離為 10 個(gè)像素點(diǎn)。你也可以設(shè)置該對(duì)象到左邊的距離為負(fù)值。
自動(dòng)動(dòng)畫(huà)
在上面的例子中我們已經(jīng)看到如何讓一張圖片在每次點(diǎn)擊之后向右移動(dòng)。我們可以通過(guò)利用 JavaScript 中的函數(shù) setTimeout() 讓它自動(dòng)執(zhí)行這個(gè)操作：
<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>這里我們?cè)黾恿艘恍┬碌闹R(shí)：
- moveRight() 函數(shù)通過(guò)調(diào)用 setTimeout() 函數(shù)設(shè)置 imgObj 對(duì)象的位置。
- 我們添加了一個(gè)新的函數(shù) stop() ，它的作用是用來(lái)清除 setTimeout() 函數(shù)設(shè)置的計(jì)時(shí)器和讓文檔對(duì)象處于它的初始位置。
伴隨鼠標(biāo)事件的翻轉(zhuǎn)
如下是一個(gè)簡(jiǎ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>讓我們來(lái)看看這里的不同點(diǎn)：
- 在加載這個(gè)網(wǎng)頁(yè)的時(shí)候，if 語(yǔ)句是否存在圖片對(duì)象。如果沒(méi)有有效的圖片對(duì)象，那么下面的語(yǔ)句塊不會(huì)被執(zhí)行。
- Image() 構(gòu)造方法創(chuàng)建和預(yù)加載一個(gè)新的圖片對(duì)象稱(chēng)為 image1。
- src 屬性值被賦值為外部圖片文件的路徑名稱(chēng)，即是 /images/html.gif。
- 同樣的方式，我們創(chuàng)建了 image2對(duì)象，并且給它賦值為 /images/http.gif。
- 符號(hào) # 禁用鏈接，這樣瀏覽器中點(diǎn)擊該鏈接就不會(huì)發(fā)生跳轉(zhuǎn)。這個(gè)鏈接表示的是一個(gè)圖片。
- onMouseOver 事件句柄在用戶(hù)的鼠標(biāo)移動(dòng)到鏈接上時(shí)會(huì)被觸發(fā)，同樣，用戶(hù)鼠標(biāo)離開(kāi)圖片鏈接時(shí)會(huì)觸發(fā) onMouseOut 事件句柄。
- 當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí)，HTTP 上的圖片就會(huì)從第一個(gè)變到第二個(gè)。用鼠標(biāo)離開(kāi)圖片時(shí)，最開(kāi)始的那副圖片就會(huì)被顯示。
- 當(dāng)鼠標(biāo)從圖片鏈接上離開(kāi)時(shí)，初始的 html.gif 圖片會(huì)再次出現(xiàn)在屏幕上面。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：