博客簿

wordpress主题页面顶部加载进度条的实现

时间:5个月前   阅读:6774

wordpress主题页面顶部加载进度条的实现,大叔第一时间能想到的就是css3了,但是可能对IE低版本的浏览器兼容性不好了,但是玩wordpress的,都无视IE了哈,那么,下面我就直接说教程吧,简单粗暴,css3+JQ了辣。

CSS3   

  1. body{

  2.                 margin:0;

  3.             }

  4.             #progress {

  5.                 position:fixed;

  6.                 height: 2px;

  7.                 background:#2085c5;

  8.                 transition:opacity 500ms linear

  9.             }

  10.             #progress.done {

  11.                 opacity:0

  12.             }

  13.             #progress span {

  14.                 position:absolute;

  15.                 height:2px;

  16.                 -webkit-box-shadow:#2085c5 1px 0 6px 1px;

  17.                 -webkit-border-radius:100%;

  18.                 opacity:1;

  19.                 width:150px;

  20.                 rightright:-10px;

  21.                 -webkit-animation:pulse 2s ease-out 0s infinite;

  22.             }


  23.             @-webkit-keyframes pulse {

  24.                 30% {

  25.                     opacity:.6

  26.                 }

  27.                 60% {

  28.                     opacity:0;

  29.                 }

  30.                 100% {

  31.                     opacity:.6

  32.                 }

  33. }

对的,仅针对针对webkit内核浏览器写的,处女座的你,可以适当的多写一些前缀。

HTML代码

  1. <div id="progress">

  2.             <span></span>

  3. </div>

jquery代码

  1. $({property: 0}).animate({property: 100}, {

  2.                 duration: 3000,

  3.                 step: function() {

  4.                     var percentage = Math.round(this.property);


  5.                     $('#progress').css('width',  percentage+"%");


  6.                      if(percentage == 100) {

  7.                             $("#progress").addClass("done");//完成,隐藏进度条

  8.                         }

  9.                 }

  10. });

活学活用吧,上面设置的时间是3秒,根据自己的需求设定时间吧,到了这步,wordpress主题页面顶部加载进度条的实现就出现了,做为想学习者,我想你应该知道ctrl+f5是去缓存刷新,刷新后,看看刷新网页,顶部是不是出现了加载进度条了。。恩,就是这样!

上一篇:WordPress 去除后台标题中的“—— WordPress”

下一篇:WordPress非插件添加文章浏览次数统计功能

网友评论