• 免费图床 开往助力 服务器监控 网站状态监控

添加彩色阅读进度条

菜鸟
2022-08-11 / 0 评论 / 57 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年08月11日,已超过833天没有更新,若内容或图片失效,请留言反馈。

Test
↑就是这样的↑

将下方代码放到头部HTML代码内

<div id="percentageCounter"></div>

将下方代码放到哪都可以 其实我也不知道行不行

绿红色的

<!-- 阅读进度条开始 -->
<style type="text/css">
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
</style>
 <script type="text/javascript">    
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");
 </script>
<!-- 阅读进度条结束 -->

白蓝色的

<!-- 阅读进度条开始 -->
<style>
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #E8EAF6,#C5CAE9,#9FA8DA,#7986CB,#5C6BC0,#3F51B5,#3949AB,#303F9F,#283593,#1A237E);border-radius:5px;}
</style>
 <script type="text/javascript">    
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");
 </script>
<!-- 阅读进度条结束 -->
0

评论 (0)

取消
© 2022-2024 菜鸟博客
已运行 00000000 丨 在线人数:1人
备案号 CDN加速 RSS MAP