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 “顶部动画进度条代码

  1. 尹先生说道:

    把上面的搜索样式和功能也分享一下吧QAQ

    1. 言小五说道:

      @尹先生 哈哈哈,咋滴?看中我的搜索了?

      1. 尹先生说道:

        @言小五 废话少说T_T快把代码叫出来グッ!(๑•̀ㅂ•́)و✧

        1. 言小五说道:

          @尹先生 下周一或者周二贴出来,安心过周末先~

  2. 自定义说道:

    已盗走,谢谢 ^_^

    1. 言小五说道:

      @自定义 不客气,我也是copy来了~

  3. nyun说道:

    好快,一会儿试试效果怎么样。

    1. 言小五说道:

      @nyun 正打算@ 你呢,你就已经看到了。

      1. nyun说道:

        @言小五 不错,效果还行,能够知道阅读进度

        1. 言小五说道:

          @nyun 不知道阅读进度怎么能叫进度条呢,哈哈哈哈,话说,我又找到一个可以折腾的东西,但是还不知道怎么下手。你看看这个博客 http://www.jsgblog.com/ 的鼠标样式,把鼠标放在空白的位置,感觉很牛的样子。

          1. nyun说道:

            @言小五 是很华丽,这应该就是鼠标滑动特效吧~我暂时不整这个,感觉影响视觉,看久了就会觉得麻烦,我的博客想弄的地方已经根本不会弄了~

            1. 言小五说道:

              @nyun 我把http://www.jsgblog.com/ 的特效样式弄了一份,太影响视觉了。。。看着头大,白折腾了。

        2. LeeJon说道:

          @nyun 这个出来很久了。https://github.com/hustcc/canvas-nest.js

          1. 言小五说道:

            @LeeJon 嗯,感谢提示。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注