晚上无聊看别人的博客,发现不少博客都有这个进度条啊。但是都是WordPress的。于是就把它折腾进emlog了。
效果可以看我的网页顶部,一条灰色进度条。
需要你的模板加载jquery,简单的说下。这个效果,就是使用jquery库完成的。在加载代码的时候显示一个条出来,然后控制条的宽度。也就是说你把带有条的宽度的代码添加到合适的位置,就可以达到加载进度条的目的了。
方法如下:
1.在header.php中添加
<div id="w-loading"><div></div></div>
2.添加加载进度显示的位置这个添加到自己模板header.php合适的位置上。
<script type="text/javascript"> jQuery("#w-loading div").animate({width:"33%"}); </script>
上面代码中,width:”33%”可以更改。更改为自己需要的百分比。
3.添加jQuery代码到footer.php
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#w-loading div").animate({width:"100%"},800,function(){ setTimeout(function(){jQuery("#w-loading div").fadeOut(500); }); }); }); </script>
4.添加CSS代码到style.css文件
#w-loading{z-index:99999;position:absolute;left:0;top:0;width:100%;height:20px;} #w-loading div{width:0;height:20px;background:#ccc;}
可以自己修改颜色啥的,根据自己的模板改颜色吧~20px就是条的宽度。
7-16 再更新一种更简单实现进度条的、添加一处就可以、
<div id="web_loading"><div></div></div> <script src="/ajaxjs/jquery-1.7.2.min.js" type="text/javascript"></script> //如果当前页面已经加载了jquery,这句可去掉 <script type="text/javascript">// < ![CDATA[ jQuery(document).ready(function(){ jQuery("#web_loading div").animate({width:"100%"},800,function(){ setTimeout(function(){jQuery("#web_loading div").fadeOut(500); }); }); }); // ]]></script> <style> #web_loading{ z-index:99999; width:100%; } #web_loading div{ width:0; height:5px; background:#FF9F15; } </style>