设置

软件中心

万能驱动

好站推荐

网站地图

你的位置: 首页 设计美化 阅读文章     灰色显示     正常显示     从天而下     桔色成人

wordpress添加网站页面顶部加载进度条

[ 2016-09-5 ] 分类:设计美化


144
 

fenxiang

大家一定见过很多站点都有这个加载进度条啊。

具体效果不截图了。欢迎刷新页面看网页头部啊。。一条灰色的进度条的说~

需要你的模板加载jquery库,加载方法在这里就不再敖述了。

简单说一下吧,这个效果呢,是使用jquery库来完成的,在加载到代码是显示一个条出来,然后控制这个条的宽度,也就是说,你把带有宽度的语句添加到合适的位置就可以达到加载进度显示的目的了。

以下代码添加到header.php

1
2
3
4
5
6
<script type="text/javascript">// <![CDATA[
jQuery("#loading-bar div").animate({width:"25%"});
// ]]></script><!--?php
if ($user_ID) echo '<script type="text/javascript"-->jQuery("#loading-bar").css("top","0px");jQuery("#loading-bar div").animate({width:"50%"});'; else echo '<script type="text/javascript">// <![CDATA[
jQuery("#loading-bar div").animate({width:"75%"});
// ]]></script>'; ?&gt;

上述代码中,width:”50%”可以更改。更改为自己需要的百分比。

添加以下jQuery代码到footer.php

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

最后把下面的样式CSS添加到style.css

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

可以按照自己的要求修改颜色和宽度



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

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




wordpress添加网站页面顶部加载进度条
2 票 [ 贝氏评级 ] 5.00 含金量 92%
立即下载
收起
展开