自由屋推书网—热门的小说推荐平台!

你的位置: 首页 > wordpress分享

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

2018-01-06 21:47:32

前端代码中有个非常经典的加载进度条特效,那就是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>

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

编辑推荐

热门小说