2012-11-12 来源:网络
【实例名称】
GMail右上角的Loading效果
【实例描述】
在打开GMail邮箱的时候,如果邮箱中内容太多会在页面的右上角出现一个提示等待的效果。本例模拟这个效果,实现一种页面加载特效。
【实例代码】
<html> <head> <title>加载效果-学无忧(www.xue51.com)</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>
【运行效果】
【难点剖析】
本例使用一个div来显示加载过程中的提示。然后使用iframe框架来加载一个页面,“onload”事件调用加载完毕后要执行的操作。加载完成后就取消显示div层的加载提示文本,此处直接隐藏div也可以。
【源码下载】
为了JS代码的准确性,请点击:GMail右上角的Loading效果 进行本实例源码下载
相关文章