使用 JavaScript 后，可以实现许多网页的动态变化效果，诸如：跑马灯、选项卡切换、广告轮播、表单数据有效验证、漂移菜单、折叠菜单、倒计时等。这些动态变化效果的实现，并不需要网页重新加载，而是通过改变局部区域的外观或内容来实现。这正是 JavaScript 实现网页动态效果的原理。
图 1：初始效果和光标移出 div 后的效果
图 2：光标移入 div 后的效果
需要网页动态变化时，只需要根据变化的需要，使用 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 后的效果
光标移入 div 后的效果如图 2 所示。
图 2：光标移入 div 后的效果
上述代码使用 CSS 代码获得图 1 所示的初始效果，包括设置 div 的宽度、高度和背景样式。而图 2 所示的效果，以及由图 2 恢复到图 1 所示的效果则使用 JavaScript 代码来实现。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/23932.html