顶部动画进度条代码
8月2号写了一篇文章《给博客添加了顶部动画和搜索按钮》主要是写了一下我是如何折腾这两个小玩意的,今天把顶部动画进度条的代码放出,大家可以参考参考。
好了,开始吧!
第一步
在主题调用style.css中添加css代码
.scroll-bar {
position: fixed;
top: 0;
left: 0;
z-index: 4500;
display: none;
width: 0;
height: 1px;
background: #f55;
}
第二步
在主题调用本地js中添加js代码
$(window).scroll(function(){
var scrollTo = $(window).scrollTop(),
docHeight = $(document).height(),
windowHeight = $(window).height();
scrollPercent = (scrollTo / (docHeight-windowHeight)) * 100;
$(".scroll-bar").attr("style","width:"+scrollPercent+"%;display: block;");
}).trigger('scroll');
第三步
在需要调用的地方插入调用代码,以本站为例
<body>
<header id="header">
<div class="scroll-bar"></div>
...
<div class="scroll-bar"></div>
</header>
</body>
第四步
没了,大功告成,非iDevise主题需要修改对应样式。
14 thoughts on “顶部动画进度条代码”
把上面的搜索样式和功能也分享一下吧QAQ
@尹先生 哈哈哈,咋滴?看中我的搜索了?
@言小五 废话少说T_T快把代码叫出来グッ!(๑•̀ㅂ•́)و✧
@尹先生 下周一或者周二贴出来,安心过周末先~
已盗走,谢谢 ^_^
@自定义 不客气,我也是copy来了~
好快,一会儿试试效果怎么样。
@nyun 正打算@ 你呢,你就已经看到了。
@言小五 不错,效果还行,能够知道阅读进度
@nyun 不知道阅读进度怎么能叫进度条呢,哈哈哈哈,话说,我又找到一个可以折腾的东西,但是还不知道怎么下手。你看看这个博客 http://www.jsgblog.com/ 的鼠标样式,把鼠标放在空白的位置,感觉很牛的样子。
@言小五 是很华丽,这应该就是鼠标滑动特效吧~我暂时不整这个,感觉影响视觉,看久了就会觉得麻烦,我的博客想弄的地方已经根本不会弄了~
@nyun 我把http://www.jsgblog.com/ 的特效样式弄了一份,太影响视觉了。。。看着头大,白折腾了。
@nyun 这个出来很久了。https://github.com/hustcc/canvas-nest.js
@LeeJon 嗯,感谢提示。