页面加载loading特效代码

人气：　来源：雨哲在线　作者：雨哲　所属栏目：窗口类　[切换到繁體中文]

介绍：不错的页面加载特效，代码放在<body>下。

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>站长手册_特效演示_页面加载loading特效代码</title>
<style><!--body,td{font-size: 12px;}--></style>

</head>
<body bgcolor="" >
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<script language=javascript>
    var s1 = setInterval("loading.innerText+='.'", 50);
    var s2 = setInterval("loading.innerText = ''", 600);

    function window.onload()
    {
      clearInterval(s1);
      clearInterval(s2);
      loadingDiv.removeNode(true);
      HiddenDiv.style.display = "";
    }
document.writeln("<div id=\"loadingDiv\" style=\"position:absolute;left:expression((this.parentElement.offsetWidth-this.offsetWidth)\/2);top:expression((document.body.clientHeight-this.style.pixelHeight)\/3+document.body.scrollTop);\">");
document.writeln(" <table border=\"1\" width=\"260\" cellspacing=\"0\" cellpadding=\"4\" style=\"border-collapse: collapse;FILTER: Alpha(opacity=85)\" bgcolor=\"#FFFFEC\">");
document.writeln("  <tr>");
document.writeln("   <td bgcolor=\"#3399FF\">");
document.writeln("    <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
document.writeln("  <tr>");
document.writeln("   <td style=\"font-size:12px;color:#ffffff\">");
document.writeln("    『站长手册』友情提示！   <\/td>");
document.writeln("   <td width=\"1\">");
document.writeln(" <span title=关闭 style=\"CURSOR: hand;color:white;font-size:12px;font-weight:bold;margin-right:4px;\" onClick=\"document.all.loadingDiv.style.display=\'none\'\">×<\/span>   <\/td>");
document.writeln("  <\/tr>");
document.writeln("    <\/table>");
document.writeln("   <\/td>");
document.writeln("  <\/tr>");
document.writeln("  <tr>");
document.writeln("   <td>");
document.writeln("    <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
document.writeln("     <tr>");
document.writeln("   <td width=\"55\" align=\"center\">");
document.writeln("    <img src=\"/texiao\/UploadFiles_8360\/200708\/20070829134826376.gif\" width=\"32\">   <\/td>");
document.writeln("   <td style=\"font-size:14px\">  数据加载中.请稍后<span id=\"loading\"><\/span>");
document.writeln("   <\/td>");
document.writeln("     <\/tr>");
document.writeln("   <\/table><\/td>");
document.writeln("   <\/tr>");
document.writeln(" <\/table>");
document.writeln("<\/div>")
document.writeln("<div id=HiddenDiv style=\"display:none\"><\/div>")
</script>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：使用到的图片：

　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

    function window.onload()
    {
      clearInterval(s1);
      clearInterval(s2);
      loadingDiv.removeNode(true);
      HiddenDiv.style.display = "";
    }
document.writeln("<div id=\"loadingDiv\" style=\"position:absolute;left:expression((this.parentElement.offsetWidth-this.offsetWidth)\/2);top:expression((document.body.clientHeight-this.style.pixelHeight)\/3+document.body.scrollTop);\">");
document.writeln(" <table border=\"1\" width=\"260\" cellspacing=\"0\" cellpadding=\"4\" style=\"border-collapse: collapse;FILTER: Alpha(opacity=85)\" bgcolor=\"#FFFFEC\">");
document.writeln("  <tr>");
document.writeln("   <td bgcolor=\"#3399FF\">");
document.writeln("    <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
document.writeln("  <tr>");
document.writeln("   <td style=\"font-size:12px;color:#ffffff\">");
document.writeln("    『站长手册』友情提示！   <\/td>");
document.writeln("   <td width=\"1\">");
document.writeln(" <span title=关闭 style=\"CURSOR: hand;color:white;font-size:12px;font-weight:bold;margin-right:4px;\" onClick=\"document.all.loadingDiv.style.display=\'none\'\">×<\/span>   <\/td>");
document.writeln("  <\/tr>");
document.writeln("    <\/table>");
document.writeln("   <\/td>");
document.writeln("  <\/tr>");
document.writeln("  <tr>");
document.writeln("   <td>");
document.writeln("    <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
document.writeln("     <tr>");
document.writeln("   <td width=\"55\" align=\"center\">");
document.writeln("    <img src=\"/texiao\/UploadFiles_8360\/200708\/20070829134826376.gif\" width=\"32\">   <\/td>");
document.writeln("   <td style=\"font-size:14px\">  数据加载中.请稍后<span id=\"loading\"><\/span>");
document.writeln("   <\/td>");
document.writeln("     <\/tr>");
document.writeln("   <\/table><\/td>");
document.writeln("   <\/tr>");
document.writeln(" <\/table>");
document.writeln("<\/div>")
document.writeln("<div id=HiddenDiv style=\"display:none\"><\/div>")
</script>