最新消息:嗨,新朋友,很高兴认识你,欢迎来到我的博客。更好的阅览效果,请用Firefox,Chrome,Opera等浏览器.

wordpress的动态加载条

再说一下原理,其实做这个加载条真心不难,一般的WP主题都是首先加载header,再加载sidebar,再加载footer,所以在这三个位置插入三个时间点,然后通过jQuery做一个加载渐隐的特效,再在合适的位置插入加载条,就成功了。

接下来就是CP党爱做的事情喽~上杜拉克草大牛的代码

一、加载jQuery

这个不解释。。。也不打算花篇幅吐槽新版jQuery那臃肿的身躯。。

二、插入三个JS节点

1、在header.php的末尾插入33%进度的节点

 <script type="text/javascript">
 jQuery("#w-loading div").animate({width:"33%"});
 </script>

2、在sidebar.php的末尾插入66%进度的节点

<script type="text/javascript">
 jQuery("#w-loading div").animate({width:"66%"});
 </script>

3、在footer.php的末尾插入100%进度的结束代码

<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>

三、插入加载条

在网页适当的位置加入加载条:

<div id="w-loading"><div></div></div>

如果你是d-simple主题,可以将这句代码放到header.php这里:

代码

<header class="header">

之后

四、CSS参考

 #w-loading{z-index:99999;position:absolute;left:0;top:0;width:100%;height:25px;}
 #w-loading div{width:0;height:25px;background:#ccc;}

本博客代码:

 #w-loading{z-index:999;position:absolute;left:0;top:0;width:100%;height:5px;}
 #w-loading div{width:0;height:5px;background:#0cb2f0;}

好了完工~(注释:该格式适应wordpress和typecho)

内容参考  http://dickwu.com/posts/2012/01/1052.html

 移动设备二维码阅读
┃文章档案信息:
┃本站文章除注明转载外,均为本站原创或编译
┃欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果,共创美好博客家园.
┃声明: 本文采用 BY-NC-SA ( 署名,非商业性使用,相同方式共享 )协议进行授权
┃转载请注明:转载来源自: 互联网新鲜事
┃本文标题: wordpress的动态加载条
┃本文网址: http://www.vgg.me/wordpress/dynamic-loading-bar-wordpress/
友荐云推荐

与本文相关文章