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 嗯,感谢提示。

发表评论

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