一種比較酷的頁面載入特效代碼

來源:互聯網
上載者:User
比較|特效|頁面   在<head></head>地區中加入以下代碼
<script src="js/loadbar.js" type="text/javascript"></script>

  loadbar.js代碼如下
function loadBar(fl)
//fl is show/hide flag
{
  var x,y;
  if (self.innerHeight)
  {// all except Explorer
    x = self.innerWidth;
    y = self.innerHeight;
  }
  else
  if (document.documentElement && document.documentElement.clientHeight)
  {// Explorer 6 Strict Mode
   x = document.documentElement.clientWidth;
   y = document.documentElement.clientHeight;
  }
  else
  if (document.body)
  {// other Explorers
   x = document.body.clientWidth;
   y = document.body.clientHeight;
  }

    var el=document.getElementById('loader');
        if(null!=el)
        {
                var top = (y/2) - 50;
                var left = (x/2) - 150;
                if( left<=0 ) left = 10;
                el.style.visibility = (fl==1)?'visible':'hidden';
                el.style.display = (fl==1)?'block':'none';
                el.style.left = left + "px"
                el.style.top = top + "px";
                el.style.zIndex = 2;
        }
}

  在<body></body>地區中加入以下代碼
<body >
<div id="loader">
<table class="loader" style="FILTER: Alpha(opacity=75)" cellspacing="1" cellpadding="5" bgcolor="#bbbbb" border="0">
<tbody><tr>
 <td align="left" bgcolor="#ffffff">
 <p><img style="MARGIN: 3px" height="32" alt="資料載入中..." src="http://www.webjx.com/htmldata/2005-12-04/images/wait.gif" width="32" align="left" /><strong>資料載入中...</strong><br />
 <span>正在載入頁面, 請稍候...</span></p></td></tr>
</tbody></table>
</div>
<script language="JavaScript" type="text/javascript">loadBar(1);</script>

  附上wait.gif圖片....

<head><script type="text/javascript">function loadBar(fl)//fl is show/hide flag{ var x,y; if (self.innerHeight) {// all except Explorer x = self.innerWidth; y = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) {// Explorer 6 Strict Mode x = document.documentElement.clientWidth; y = document.documentElement.clientHeight; } else if (document.body) {// other Explorers x = document.body.clientWidth; y = document.body.clientHeight; } var el=document.getElementById('loader'); if(null!=el) { var top = (y/2) - 50; var left = (x/2) - 150; if( left<=0 ) left = 10; el.style.visibility = (fl==1)?'visible':'hidden'; el.style.display = (fl==1)?'block':'none'; el.style.left = left + "px" el.style.top = top + "px"; el.style.zIndex = 2; }}</script></head><body><body ><div id="loader"><table class="loader" style="FILTER: Alpha(opacity=75)" cellspacing="1" cellpadding="5" bgcolor="#bbbbb" border="0"><tbody><tr> <td align="left" bgcolor="#ffffff"> <p><img style="MARGIN: 3px" height="32" alt="資料載入中..." src="200777171234284.gif" width="32" align="left" /><strong>資料載入中...</strong><br /> <span>正在載入頁面, 請稍候...</span></p></td></tr></tbody></table></div><script language="JavaScript" type="text/javascript">loadBar(1);</script></body>

    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。