當(dāng)前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > GMail右上角的Loading效果

GMail右上角的Loading效果

2012/11/12 13:00:44作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

GMail右上角的Loading效果

【實(shí)例描述】

在打開GMail郵箱的時(shí)候，如果郵箱中內(nèi)容太多會(huì)在頁面的右上角出現(xiàn)一個(gè)提示等待的效果。本例模擬這個(gè)效果，實(shí)現(xiàn)一種頁面加載特效。

【實(shí)例代碼】

<html>
<head>
<title>加載效果-學(xué)無憂（denvermotorcycleaccidentlawyer.com）</title>
<script language="javascript">
function hideMsg()
{
   document.getElementById("msgDiv").innerHTML="";
//取消等待狀態(tài)的顯示
}
</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>

【運(yùn)行效果】

 GMail右上角的Loading效果運(yùn)行效果

【難點(diǎn)剖析】

本例使用一個(gè)div來顯示加載過程中的提示。然后使用iframe框架來加載一個(gè)頁面，“onload”事件調(diào)用加載完畢后要執(zhí)行的操作。加載完成后就取消顯示div層的加載提示文本，此處直接隱藏div也可以。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：GMail右上角的Loading效果 進(jìn)行本實(shí)例源碼下載 

標(biāo)簽： GMail  Loading  效果