您的位置：首页 > 其它

两款页面内容进度加载效果

2008-11-21 15:05 471 查看

第一款

将下列代码保存为load.JS文件

var s1 = setInterval("loading.innerText+='.'", 500);

var s2 = setInterval("loading.innerText = ''", 8000);

function window.onload()

{

clearInterval(s1);

clearInterval(s2);

loadingDiv.removeNode(true);

}

document.writeln("<div id=\"loadingDiv\" style=\"z-index:50000;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=95)\" bgcolor=\"#ffffff\">");

document.writeln(" <tr>");

document.writeln(" <td bgcolor=\"#2D2D2D\">");

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=\"35\" align=\"center\">");

document.writeln(" <img src=\"/js\/loadding.gif\" width=\"32\"> <\/td>");

document.writeln(" <td style=\"font-size:12px;color:#000000\">站点正在加载图片,请您耐心等

待....<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("<SCRIPT LANGUAGE=\"javascript\"> ");

document.writeln(" ");

document.writeln("<\/SCRIPT>");

在HEAD中加入

<script language="JavaScript" type="text/javascript" src="/js/load.js"></script>

第二款：

JS文件代码保存为LOAD.js

<!--

//页面加载中效果开始

var t_id = setInterval(animate,20);

var pos=0;

var dir=2;

var len=0;

function animate() {

var elem = document.getElementById('progress');

if(elem != null) {

if (pos==0) len += dir;

if (len>32 || pos>79) pos += dir;

if (pos>79) len -= dir;

if (pos>79 && len==0) pos=0;

elem.style.left = pos;

elem.style.width = len;

}

}

function remove_loading() {

this.clearInterval(t_id);

var targelem = document.getElementById('loader_container');

targelem.style.display='none';

targelem.style.visibility='hidden';

}

CSS代码保存为css.css

/* 页面加载特效 */

#loader_container {

text-align:center;

position:absolute;

top:40%;

width:100%;

left: 0;

}

#loader {

font-family:Tahoma, Helvetica, sans;

font-size:11.5px;

color:#000000;

background-color:#FFFFFF;

padding:10px 0 16px 0;

margin:0 auto;

display:block;

width:130px;

border:1px solid #5a667b;

text-align:left;

z-index:2;

}

#progress {

height:5px;

font-size:1px;

width:1px;

position:relative;

top:1px;

left:0px;

background-color:#8894a8;

}

#loader_bg {

background-color:#e4e7eb;

position:relative;

top:8px;

left:8px;

height:7px;

width:113px;

font-size:1px;

}

紧跟<body>中加入

<div id="loader_container">

<div id="loader" style="width: 130px; height: 48px">

<div align="center"><font color="#FF9900">页面正在加载中 <br>

请稍候...</font></div>

<div id="loader_bg"><div id="progress"> </div></div>

</div>

</div>

<head>间加入

<style type="text/css" title="currentStyle" media="screen">

@import "css.css";

</style>

<script language="JavaScript" src="load.js"></script>

</body>前加入

<script language="javascript">

remove_loading();

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航