殷德瑶博客
喜欢的歌,静静地听!喜欢的人,远远地看!

给网站顶部加个加载进度条

殷德瑶 2015-10-2 emlog教程 评论 5423 次
看见好多网站打开时网页顶部都有一个进度条,网页加载时开始显示,加载完成时自动隐藏。为提升本博客的逼格,找到个NProgress.js插件。使用起来比较简单。当然我这个使用比较简单。大家可参照文档自己去写。
1.NProgress Github地址:https://github.com/rstacruz/nprogress/
直接下载zip代码,解压出来将nprogress.css以及nprogress.js复制出来放到你的主题目录下
另外还需要jQuery1.8版本以上。
2.就在header.php里引用
<link rel="stylesheet" type="text/css" href="css/nprogress.css">
< script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
     < script type="text/javascript" src="s/nprogress.js"></script>

3.在footer.php </body>标签前添加如下代码:

<script type="text/javascript">
$(function(){
NProgress.start();
$(document).ready(function(){
NProgress.done();
});
});
< /script>

发表评论


粤ICP备15078261号 Powered by 黑暗之夜
Theme by 殷德瑶博客