首页 > 编程笔记 > JavaScript笔记

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 所示，
初始效果和光标移出div后的效果
图 1：初始效果和光标移出 div 后的效果

光标移入 div 后的效果如图 2 所示。
光标移入div后的效果
图 2：光标移入 div 后的效果

上述代码使用 CSS 代码获得图 1 所示的初始效果，包括设置 div 的宽度、高度和背景样式。而图 2 所示的效果，以及由图 2 恢复到图 1 所示的效果则使用 JavaScript 代码来实现。

所有教程

优秀文章