Author Topic: 页面载入进度条  (Read 1794 times)

Offline 西华秦

  • 版主
  • 超级会员
  • *****
  • Posts: 2237
  • 评价: +5/-214
    • View Profile
    • 烙印
页面载入进度条
« on: April 26, 2011, 07:03:11 pm »
首先,确定你的主题已经引入 jQuery 框架(一定要放在页头 <head>标签内),然后在header.php中任意位置插入如下jQuery 代码

Code: [Select]
<script type="text/javascript">
$("#loading").show();
$("#loading div").animate({width:"10%"});
</script>
其中的10%应该随载入顺序逐步增加,直到 footer.php

之后在<body>标签起始位置放置:

Code: [Select]
<div id="loading" style="display: none;"><div style="width: 0%; display: block;"></div></div>最后在footer.php文件中插入下面的代码:
Code: [Select]
<script type="text/javascript">
$("#loading div").animate({width:"100%"},function(){
setTimeout(function(){$("#loading").hide();},1000);
});
</script>
还有CSS文件,请参考下面代码自行加工:

Code: [Select]
#loading {
    height: 4px;
    left: 0;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 99999;
}

#loading div{
display:none;
height:4px;
background:#4171b8;
}
搞定收工,刷新查看效果吧!

首发awy.me