JS實現網頁動態效果的原理

使用 JavaScript 後，可以實現許多網頁的動態變化效果，諸如：跑馬燈、索引標籤切換、廣告輪播、表單資料有效驗證、漂移選單、摺疊選單、倒計時等。這些動態變化效果的實現，並不需要網頁重新載入，而是通過改變區域性區域的外觀或內容來實現。這正是 JavaScript 實現網頁動態效果的原理。

需要網頁動態變化時，只需要根據變化的需要，使用 JavaScript 修改元素的樣式或增加/清空頁面元素內容或屬性值。使用 JavaScript 動態改變網頁時一般會結合 CSS，其中 CSS 設定元素的初始樣式，JavaScript 則實現元素的動態樣式。

所以使用 JavaScript 實現網頁動態效果，通常包含這樣兩個步驟：首先是使用 CSS 設定初始樣式（即布局元素）；然後再根據動態變化的需要，使用 JavaScript 修改元素樣式或增加/清空頁面元素內容或屬性值。

JavaScript 實現網頁變化原理的應用範例如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一個JavaScript範例</title>
<style>
     /*設定div的寬度、高度和背景樣式*/
     div{
         width:200px;
         height:200px;
         background:#CCC;
     }
</style>
</head>
<body>
<div id="div1"></div>
<script>
     //使用document物件呼叫getElmentById()方法獲取文件中的元素
     var oDiv = document.getElementById("div1"); 
     //游標移入div上時呼叫函數修改div樣式
     oDiv.onmousemover = changeStyle; 
     //alert("hi");   
     //游標移出div時呼叫函數恢復div最初樣式
     oDiv.onmouseout = resetStyle; 
     //oDiv.onmouseout=resetStyl;
     //alert("hello");     
     //定義函數，修改div的寬度和背景顏色
     function changeStyle(){ 
         oDiv.style.width = "400px";
         oDiv.style.background = "#FCF";
     }
     //定義函數，將div的寬度和背景樣式恢復為最初狀態
     function resetStyle(){ 
         oDiv.style.width = "200px";
         oDiv.style.background = "#CCC";
     }
</script>
</body>
</html>

上述程式碼在 Chrome 瀏覽器中執行後的初始效果和游標移出 div 後的效果完全一樣，如圖 1 所示，

圖 1：初始效果和游標移出 div 後的效果