真水无香.博客

页面Loading的实现代码

页面Loading的实现代码

页面Loading的实现代码内容简介:
插件装好后会出现无法正常留言的错误,所以把这个插件中的一部分代码取了出来,加上在网上找的一部分代码,组合成了现在的代码,实现了点击链接和加载页面时都有Loading画面,我不懂任何script代码,所以下面的代码有可能有多余的部分。

TT的Loading插件装好后会出现无法正常留言的错误,所以把这个插件中的一部分代码取了出来,加上在网上找的一部分代码,组合成了现在的代码,实现了点击链接和加载页面时都有Loading画面,我不懂任何script代码,所以下面的代码有可能有多余的部分。实现方法:
1、在<head></head>之间加入:


CODE:
<style type="text/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;
}
#loader_bg {background-color:#e4e7eb;
position:relative;
top:8px;
left:8px;
height:7px;
width:113px;
font-size:1px}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:0px;
background-color:#70940D
}
</style><script language="JavaScript">
//读取框
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 show_loading() {
var xx = document.body.clientWidth;
var yy = document.body.clientHeight;

document.getElementById('loader_container').style.pixelLeft = document.body.scrollLeft+(parseInt(xx/20)*10)-50;
document.getElementById('loader_container').style.pixelTop = document.body.scrollTop+(parseInt(yy/20)*10)-20;
document.getElementById('loader_container').style.display = '';
}
function remove_loading() {
document.getElementById('loader_container').style.display = 'none';
}
</script>
[Copy to clipboard]

2、<body>改成

CODE:
<body onBeforeunload="show_loading();" onLoad="remove_loading();" onkeydown="if(event.keyCode==27) return false;">
[Copy to clipboard]

3、在<body></body>之间加入

CODE:
<div id="loader_container" style='position:absolute; display:none; width:100; height:40; z-index: 1500;'>
<div id="loader">
<div align="center"><img src="http://www.egotong.com/image/wind/logo.gif" onLoad="show_loading();"></div>
<div id="loader_bg"><div id="progress"> </div></div>
</div></div>

代码下载:

code.Loading.txt
本文连接: http://www.egotong.com/Script/code.Loading.ego.html
« GooGle翻译一个小工具百兆双线全能免费空间送5兆SQL数据库 »
收藏:页面Loading的实现代码
  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Search

网站分类

  • 订阅到Google
  • 订阅到抓虾
  • 订阅到鲜果
  • 订阅到Yahoo收藏
  • 订阅到飞鸽
  • 订阅到Bloglines
  • 订阅到Yodao
  • 订阅到Netvibes
  • 订阅到NewsGator

最近发表


Copyright 真水无香 Rights Reserved