最近评论
正在载入评论列表...
22.6 Gmail右上角的Loading效果
【实例描述】
在打开Gmail邮箱的时候，如果邮箱中内容太多会在页面的右上角出现一个提示等待的效果。本例模拟这个效果，实现一种页面加载特效。
【实现代码】
<html>
<head>
<title>加载效果</title>
<script language="javascript">
function hideMsg()
{
document.getElementById("msgDiv").innerHTML=""; //取消等待状态的显示
}
</script>
</head>
<body onunload="window.open('http://http://www.google.com')" scroll=no topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0>
<div style="position:absolute;top:10;left:10;" id="msgDiv"><font color=red> loading.........</font></div>
<iframe onload="hideMsg()" style="position:absolute;top:40;left:10;" src="http: //www.sina.com.cn" width=300 height=200></iframe>
</body>
</html>
【运行效果】
加载提示效果如图22-6所示。
图22-6 加载提示效果
【难点剖析】
本例使用一个div来显示加载过程中的提示。然后使用iframe框架来加载一个页面，“onload”事件调用加载完毕后要执行的操作。加载完成后就取消显示div层的加载提示文本，此处直接隐藏div也可以。
图书导读
