用户名 密码 记住我 还未注册?

给xoops加上可爱的loading(载入中)效果! [技术论坛 - 主题综合]

XOOPS China 讨论区 > XOOPS Theme (主题) > 主题综合 > 给xoops加上可爱的loading(载入中)效果!

正在浏览:   1 名游客



 到底部   前一个主题   下一个主题  [无发表权] 请登录或者注册



给xoops加上可爱的loading(载入中)效果!
资深会员
注册日期:
2004/8/8 14:25
所属群组:
注册会员
帖子: 329 | 精华: 3
等级: 16; EXP: 94
HP: 0 / 398
MP: 109 / 7330
离线
用记事本打开theme/xxx/theme.html
第一步:在<head></head>里添加如下代码

<style type="text/css">
#loader_container {
text-align:center;
position:absolute;
top:40%;
width:100%;
left0;
}

#loader {
font-family:TahomaHelveticasans;
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==0len += dir;
if (
len>32 || pos>79pos += dir;
if (
pos>79len -= dir;
if (
pos>79 && len==0pos=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';
}

</script>


第二步:修改<body>为

<body onLoad="remove_loading();">


第三步:在<body>下面添加以下代码

<div id="loader_container">
<
div id="loader">
<
div align="center">页面正在加载中 ...</div>
<
div id="loader_bg"><div id="progress"> </div></div>
</
div>
</
div>

2007/3/31 13:51
工具箱 短消息 Email PDF 书签 打印 举报 回顶部


回复: 给xoops加上可爱的loading(载入中)效果!
资深会员
注册日期:
2004/8/8 14:25
所属群组:
注册会员
帖子: 329 | 精华: 3
等级: 16; EXP: 94
HP: 0 / 398
MP: 109 / 7330
离线

2007/3/31 13:52
工具箱 短消息 Email PDF 书签 打印 举报 回顶部


回复: 给xoops加上可爱的loading(载入中)效果!
Support Team
注册日期:
2006/6/26 10:17
来自 北京
所属群组:
网站管理员
注册会员
Dev+Hack
帖子: 887 | 精华: 5
等级: 26; EXP: 61
HP: 128 / 640
MP: 295 / 8259
离线
引用:

东至 写道:
演示
www.vicein.com

和IE的table渲染方式有关,用firefox就可以即时看到已下载部分的效果。

2007/4/2 14:33
_________________
Skype: huzhenghui
QQ: 443089607
QQ Mail: [email protected]
GTalk: huzhengh
GMail: [email protected]
工具箱 短消息 Email PDF 书签 打印 举报 回顶部



  [无发表权] 请登录或者注册


不可查看帖子。
不可发帖。
不可回复。
不可编辑自己的帖子。
不可删除自己的帖子。
不可发起投票调查。
不可在投票调查中投票。
不可上传附件。
不可不经审核直接发帖。
不可使用主题类别。
不可使用HTML语法。
不可使用签名档。

[高级搜索]