设置

软件中心

万能驱动

好站推荐

网站地图

你的位置: 首页 实用技巧 阅读文章     灰色显示     正常显示     从天而下     桔色成人

为WordPress网站加上加载进度条,效果还不错。

[ 2013-06-8 ] 分类:实用技巧


3,412
 

fenxiang
看了好几个博客,在打开页面时,顶部会有一个加载进度条,感觉挺有趣的。好多大网站也有例如百度的内页,淘宝,等等于是试着查找了一下,找到了类似的方法,适当修改后,也试着加到了自己的页面中,感觉效果还不错,呵呵。
原理挺简单的,用绝对定位的方式,将带有颜色的进度条位置定位到某个地方,然后用JQuery代码控制进度条可见,并且改变其width值,最后使其隐藏。
基本上适用于所有主题,因为没太多影响,一般定位在顶部就可以了。如果将进度条定位在比较和谐的地方,与主题嵌入紧密,例如在现有主题的导航栏的底部的线条之上,那就要自己好好琢磨有没有影响导航栏了。反正当初我就加在现有主题的导航栏下方,效果也挺好的,刚好从线上走过,可惜对导航栏的二级菜单有点影响,于是忍痛放到了顶部。
大致方法如下:

1、添加Html代码

1
<div id="loading-bar"><div></div></div>

这段Html代码添加到header.php中合适的位置即可。

2、添加JQuery代码

第一段:

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

这段JQuery代码可以添加到多个位置,但是需要在不同的地方修改其width值,更改成自己需要的百分比。如在头部(header.php)之后加上并改成30%,在主要内容的循环之后加上并改成50%,在边栏(siderbar.php)之后加上并改成80%,如此。在浏览器加载到此处代码时,进度条就会以动画的形式出现,并增加到相应的宽度。根据加在不同的位置和百分比,也能大致看出浏览器加载代码的真实进度。
第二段:

1
<script type="text/javascript">jQuery(document).ready(function(){jQuery("#loading-bar div").animate({width:"100%"},800,function(){setTimeout(function(){jQuery("#loading-bar div").fadeOut(500);});});});</script>

这段JQuery代码可以添加至footer.php中的最后。此代码有两句,前一句和上一段的一样,只是width改成了100%,后一句就是在width达到100%后消失,即达到了加载完成的效果。

3、添加Css代码

1
2
#loading-bar{z-index:99999;position:absolute;left:0;top:0;width:100%;height:8px;}
#loading-bar div{width:0;height:8px;background:#08d;}

这段Css代码添加至css文件中即可。可以自行修改绝对位置、进度条高度和颜色。
差不多将这三个步骤完成就大功告成了,不过对于有些人来说,有个细节也需要处理。比如我定位在离顶部100px的地方,但是你会发现,登录wordpress后和未登录的位置会有些不同,因为登录后顶部的黑色管理菜单占了一定的高度,一般是28px,于是我就加了一条判断语句,如果已登录就修改css中的top的值,如果未登录就不做修改。大致如下:

1
2
3
4
<?php
if ($user_ID) echo '<script type="text/javascript">jQuery("#loading-bar").css("top","28px");jQuery("#loading-bar div").animate({width:"30%"});</script>';
else echo '<script type="text/javascript">jQuery("#loading-bar div").animate({width:"30%"});</script>';
?>

在加了步骤二中的JQuery代码的地方均按照此语句修改即可。
这样,一个有趣的加载进度条就出来了,虽然没有太多技术含量,也没有太多实际意义,但是还是可以玩一玩嘛,反正我是挺喜欢的,呵呵。



无觅相关文章插件,快速提升流量

郑重声明:请尊重本站作者的劳动成果,未经允许,请不要复制转载奇云网的页面内容,鄙视各种无耻的采集粘贴行为!本站个别内容来源于网络,版权归原作者所有,奇云网无版权责任!




为WordPress网站加上加载进度条,效果还不错。
2 票 [ 贝氏评级 ] 2.00 含金量 78%
立即下载
收起
展开