征集網銳志網絡淘途找素材上91
創意在線首頁
平面設計交互設計CG動漫工業設計建筑環境數碼影像創意搜
 首頁大賽征集資訊教程畫廊訪談作品集創企同盟設計招聘人才專區競賽臺專題論吧 找素材看酷站設計網址庫
教程網 Illustrator、Photoshop、CoreaDreaw、AI教程、PS教程
當前位置:首頁 > 教程 > 腳本特效 > 正文
js顯示網頁載入進度的等待效果
作者: 來源: 發表時間:2011-3-1 13:50:42 瀏覽:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>js顯示網頁載入進度的等待效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代碼加到<head>與</head>之間-->
<script type="text/javascript">
<!--
var ie5 = (document.all && document.getElementsByTagName);
var step = 0;
function setSB(v, el, inforEl, message) {
if (ie5 || document.readyState == "complete") {
filterEl = el.children[0];
valueEl = el.children[1];
if (filterEl.style.pixelWidth > 0) {
var filterBackup = filterEl.style.filter;
filterEl.style.filter = "";
filterEl.style.filter = filterBackup;
}
filterEl.style.width = v + "%";
valueEl.innerText = v + "%";
inforEl.innerText = message;
}
}
function setSBByStep(v, el, inforEl, message) {
if (ie5 || document.readyState == "complete") {
step = step + v;
filterEl = el.children[0];
valueEl = el.children[1];

if (filterEl.style.pixelWidth > 0) {
var filterBackup = filterEl.style.filter;
filterEl.style.filter = "";
filterEl.style.filter = filterBackup;
}
filterEl.style.width = step + "%";
valueEl.innerText = step + "%"
inforEl.innerText = message;
}
}
function fakeProgress(v, el) {
if (v >= 101)
location.href="http://www.aaa.com";
else {
setSB(v, el, infor, "歡迎訪問“教程網”,頁面載入中,請稍候……");
window.setTimeout("fakeProgress(" + (v + 1) + ", document.all[’" + el.id + "’])", 50);//等待5秒
}
}
//-->
</script>
</head>
<!--把<body>改為-->
<body onload="fakeProgress(0,zzsky)">
<!--把下面代碼加到<body>與</body>之間-->
<div align="center">
 <div id="zzsky" style="border-right: #ffffff 1px solid; border-top: #ffffff 1px solid; background: #99ccff; border-left: medium none; width: 400px; border-bottom: #cccccc 1px solid; height: 14px; text-align: left">
  <div id="sbChild1" style="filter: alpha(opacity=0, finishopacity=80, style=1, startx=0, starty=0, finishx=100, finishy=0); overflow: hidden; width: 100%; position: absolute; height: 12px">
   <div style="background: #000000; width: 100% ;height:12px; overflow: hidden"></div>
  </div>
  <div style="font-size: 10px; width: 400px; color: white; font-family: arial; position: absolute; height: 14px; text-align: center"></div>
 </div>
 <p></p>
 <div id="infor" style="font-size: 11px; width: 100%; color: #999999; font-family: arial; position: relative; height: 14px; text-align: center"></div>
</div>
</body>
</html>


在線編輯:angel
本文鏈接:


推薦閱讀:
·2019第五屆“學院派獎”全國藝術與設計大展 征集公告
·2019第十三屆“創意中國”設計大獎征稿
·第十三屆《中國大學生美術作品年鑒》征稿開始
·青春唯美插畫培訓網絡遠程班正在招生
·20000元 余姚征集文化旅游宣傳LOGO與宣傳標語
·6000元 征集柯城區“一村萬樹”LOGO設計
·5000元 征集陜西政務服務形象標識
·3000元 2019中國•大圩馬拉松文化節吉祥物征集
免責聲明:本站刊載此文不代表同意其說法或描述,僅為提供更多信息。對本文有異議,請聯絡本站!
轉載要求:文章作者及來源信息必需保留。轉載之圖片、文件請不要盜鏈本站地址,且不準打上各自站點的水印!

近期推薦報道 返回首頁更多精彩等著你!

Illustrator| Illustrator繪制笑容滿面的小章Illustrator| AI繪制簡單花朵
Photoshop| Photoshop制作個性彩色頹廢字Photoshop| 利用濾鏡制作漂亮的火焰菊花
HTML/CSS| 網頁設計技巧總結:CSS制作網頁中的三角Painter| Painter教程:臨摹一張逼真效果的照
Illustrator| Illustrator基礎實例:繪制矢量Photoshop| Photoshop制作非常簡單的立方體
Photoshop| Photoshop制作奇趣的水紋字Photoshop| PS合成震撼的汽車爆炸瞬間
韓國站點 素材資源 藝術攝影 游戲娛樂 影視網站 建筑家居 FLASH站 旅游購物 明星網站 個性展示 網站教學 工 作 室 學校教育
設計門戶 優秀企業 時尚品牌 象素站點 數碼通信 設計公司 汽車網站 國外優秀 兒童網站 文化藝術 體育運動 美容健身 食品飲料
網站名稱:whaternet
網站地址:http://whaternet.com/
加入時間:2014-8-5 13:59:20
網站名稱:mnnaite
網站地址:http://www.mnnaite.com/static/
加入時間:2014-8-5 13:58:07
網站名稱:tijuanaflats
網站地址:http://tijuanaflats.com/
加入時間:2014-8-5 13:55:32
網站名稱:digital
網站地址:http://production-digital.com/
加入時間:2014-8-5 13:54:45
網站名稱:deutschesee
網站地址:http://www.deutschesee.de/
加入時間:2014-8-5 13:51:54
網站名稱:kennedy
網站地址:http://www.kennedyandoswald.com/
加入時間:2014-8-5 13:50:57
關于本站 | 聯系方式 | 商業服務 | 合作伙伴 | 站點地圖 | 免責聲明 | 版權聲明 | 在線投稿  
 
仙侠情缘APP