当前位置： 首页 > wordpress分享 > 正文

为wordpress添加nprogress.js加载进度条特效

发布：2018-01-06 21:47:32   分类：wordpress分享  抢沙发  

前端代码中有个非常经典的加载进度条特效，那就是nprogress.js，今天就给大家说一下wordpress安装原生态的nprogress.js进度条加载特效，首先这个js特效依赖于 jQuery (1.8版本及以上)才可以，然后添加 nprogress.js和nprogress.css到你的项目中。这两个文件最好去官方下载，官方地址：http://ricostacruz.com/nprogress/

有了这两个文件之后就好说了。

第一步，将这两个文件上传到你的主题模板中，并在主题模板的头部添加以下代码，进行加载：

  1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/nprogress.css"></script>
  2. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/nprogress.js"></script>

第二部，加载好了以后设置加载进度条的参数，将以下代码复制到footer.php中的</body>代码前。

  1. <script>
  2.   $('body').show();
  3.   $('.version').text(NProgress.version);
  4.   NProgress.start();
  5.   setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 500);
  6. </script>

这样保存；刷新一下页面看一下吧！是不是在网页最顶端有了加载进度条了！

0

本文固定链接: https://www.ziyouwu.com/archives/1620.html | 自由屋博客


关键字: , , ,
【上一篇】
【下一篇】

您可能还会对这些文章感兴趣！