为WordPress网站顶部添加一个加载进度条

CSS代码,可以放到style.css也可以放到css目录里的mian.css里。

<code class="language-none">@keyframes loading-bar-move{0%{width:0;opacity:0}%{width:0;opacity:0}70%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@-moz-keyframes loading-bar-move{0%{width:0;opacity:0}70%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@-o-keyframes loading-bar-move{0%{width:0;opacity:0}70%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@-webkit-keyframes loading-bar-move{0%{width:0;opacity:0}70%{width:100%;opacity:1}100%{width:100%;opacity:0}}
.progress{border-radius: 0;position: absolute;left:0;top:0;height:5px;animation:loading-bar-move 2s;-moz-animation:loading-bar-move 2s;-webkit-animation:loading-bar-move 2s;-o-animation:loading-bar-move 2s;}
.progress-bar{width:100%;}
</code>

JQ代码,可以放到JS文件夹里面的main.js里。

<code class="language-none">//进度条加载!
$(document).on("click","a",function(){
 if( $(window).width()&lt;768 ) return;
 if( $(this).attr('target')=='_blank' ) return;
 if( $(this).parent('#pagination-comments').length&gt;0 ) return;
 var url = $(this).attr('href');
 var u = document.createElement('a');
 u.href = url,
 ru = u.protocol+u.hostname+u.pathname+u.search,
 l = location,
 rl = l.protocol+l.hostname+l.pathname+l.search;
 if(ru==rl) return;
 var urlreg=/^((https|http|ftp|rtsp|mms)?://)+[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&amp;_~`@[]':+!]*([^&lt;&gt;""])*$/;
 if(urlreg.test(url)){
 n = $('.header');
 if( n.children('.progress').length&lt;=0 ){
 n.prepend('&lt;div class="progress"&gt;&lt;div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"&gt;&lt;/div&gt;&lt;/div&gt;');
 }
 }
});</code>
WordPress教程

WordPress美化教程 文章内页增加彩色渐变框

2020-4-23 12:01:04

WordPress教程

WordPress实现多站点同时管理详细方法【精】

2020-5-10 2:21:06

无法充值请加客服QQ3635339338人工充值
24小时自助充值教程QQ3635339338人工充值
版权声明 本站所发布的一切与破解相关的文章仅限用于学习和研究目的,请在下载后的24个小时之内,从您的电脑中彻底删除。所有资源均来自于网络,不得用于商业或者非法用途,否则一切后果请用户自负。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索