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

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

立即下载 

 

一组最新央视卫视直播源【2018.8.19】

上一篇

无插件为WordPress站点添加简繁转换功能【WP系列教程之十】

下一篇

99%的人还看了

发表评论

插入图片

欢迎登陆本站

 | 注册


耗时 0.220 秒 查询 13 次 内存 8.59 MB

在线工具

VIP视频解析
注册

登录

忘记密码 ?