无插件为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;
}

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

传送门:  

 

古风网版权互动须知

本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

原文地址:https://www.vivst.com/629.html 无插件为wordpress网站顶部添加进度条【WP系列教程之九】

发表评论