使用 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 后的效果如图 2 所示。
上述代码使用 CSS 代码获得图 1 所示的初始效果,包括设置 div 的宽度、高度和背景样式。而图 2 所示的效果,以及由图 2 恢复到图 1 所示的效果则使用 JavaScript 代码来实现。