无插件为wordpress网站顶部添加进度条【WP系列教程之九】

有时候你是否看到在点击别人网站完成加载之前网站顶部有进度条在跑呢,你是否也想让你的网站拥有此特效呢。

进度条样式
进度条样式

这些特效呢,有的是使用js来完成的,在加载到代码是显示一个条出来,然后控制这个条的宽度,有的是通过CSS来实现的,今天就把代码贴出来,用来无插件为wordpress网站顶部添加彩色进度条,话不多说,代码如下:

js+CSS实现方法:

1.下载pace.min.js文件,

文件下载:

2.将pace.min.js放到主题根目录js目录中。

3.打开主题函数模板functions.php,将以下代码加入并保存:

PS:注意修改为对应的js文件路径

wp_enqueue_script('pace.min', get_theme_file_uri('/js/pace.min.js'), array('jquery'),'1.0',true);

4.将样式代码,添加到主题style.css最后:

/** 进度条样式**/
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
.pace-inactive {
opacity: 0;
filter: alpha(opacity=0);
}
.pace .pace-progress {
background: #ff0000;
position: fixed;
z-index: 2000;
top: 0;
rightright: 100%;
width: 100%;
height: 3px;
}

保存后即可实现顶部进度条效果。以下文件内有多个效果样式,可自己甄选适合你网站的款式。

文件下载:  

 

古风网络博客资源声明

本站资源来源于网络收集和网友分享,只供学习交流使用,请下载后24小时内删除。
如本站侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
本站部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
本站部分文章为原创,部分为转载,引用请保留链接信息,谢谢合作!
本文链接地址:https://www.sheng521.top/629.html 无插件为wordpress网站顶部添加进度条【WP系列教程之九】

发表评论