wordpress主题添加页面加载进度条6条评论

2011-04-26    分类:WordPress前端开发    2,621   

今天在浏览别人的博客时,发现他的博客在载入页面时会有进度条提示,觉得这个功能挺吸引人的,于是就自己也试了试
image
,最后成功了!现在跟大家分享一下方法!

首先,在你想要进度条显示的地方加上

<div id="page_loading"><div style="width: 100%;
display: none;" id="page_loading_in"></div></div>

然后在主题的一些位置加上

<script type="text/javascript">$("#page_loading_in")
.animate({width:"10%"});</script>

其中10%是上面代码所放的位置加载完后显示的进度,所以不同的地方应该显示不同的值,例如在</body>前,则应该为100%,因为到</body>时,页面已经加载完毕了!(当然</body>前不只是改成100%就可以了,具体代码下面有)再比如在加载完侧边栏后,就只剩下页脚了,那么我们可以在侧边栏和页脚的代码间加上

<script type="text/javascript">$("#page_loading_in")
.animate({width:"80%"});</script>

最后在</body>前,加上

<script type="text/javascript">
jQuery(window).load(function(){
$("#page_loading_in").animate({width:"100%"},function(){
setTimeout(function(){$("#page_loading_in")
.animate({opacity:'toggle'},800);},800);
}); 
});
</script>

好了,到这里基本上完成了,但是大家别忘了,我们还需要加入一段css样式:打开style.css,加上

#page_loading{position:absolute;left:0;bottom:-1px;width:100%;height:1px;}
#page_loading_in{display:none;height:1px;background:#d54e21;}

效果可以看我的 主题站

转载请注明:Lomu » wordpress主题添加页面加载进度条

继续查看有关 的文章

相关文章

5访客评论 ,博主回复1

  1. 本地测试可以 传到网站没效果 囧

  2. 这功能确实不错,正用着。

  3. 回访了哦 链接会统一整理的哦

  4. 呵呵 学习了 感觉没什么大用处

  5. 暂时没想着加

我来说说

发表评论您必须先登录