【学习笔记】实现顶部滚动条

最新推荐文章于 2024-09-06 02:34:16 发布

My-Lady

最新推荐文章于 2024-09-06 02:34:16 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： jQuery 顶部动画进度条 animation

本文链接：https://blog.csdn.net/heshan1992/article/details/77931749

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何使用CSS3的animation属性和jQuery的animation函数来创建顶部滚动条。CSS实现较难达到平滑过渡效果，而jQuery在滚动条达到100%时能通过transition自然隐藏。详细讲解了jQuery动画的多种参数配置，包括duration、step、progress和complete等，并指出要实现渐进特效需利用动画队列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

静态实现顶部滚动条主要使用以下的两种方式：
（1）利用CSS3 的animation属性实现
（2）利用jQuery的animation动画实现
以下附上代码：
CSS实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顶部进度条</title>
    <style type="text/css">
        body{
            margin:0;
            width:100%
        }
        #progress {
            position:fixed;
            height: 2px;
            background:#2085c5;
            transition: width 1000ms ;
            animation: progress 2s ease-in 0.2s;
        }

        @-webkit-keyframes progress {
            0%{
                width: 0;
            }
            10%{
                width:10%;
            }
            20%{
                width:20%;
            }
            30%{
                width:30%;
            }
            40%{
                width:40%;
            }
            50%{
                width:50%;
            }
            60%{
                width:60%;
            }
            70%{
                width:70%;
            }
            80%{
                width:80%;
            }
            90% {
                width: 90%;
            }
            100%{
                width:100%;
            }
        }
       /*span主要是为了实现特效，也可以不需要*/
        #progress span {
            position:absolute;
            height:2px;
            -webkit-box-shadow:#2085c5 1px 0 6px 1px;
            -webkit-border-radius:100%;
            opacity:1;
            width:150px;
            right:-10px;
            -webkit-animation:pulse 2s ease-out 0s infinite;
        }

        @-webkit-keyframes pulse {
            30% {
                opacity:.6
            }
            60% {
                opacity:0;
            }
            100% {
                opacity:.6
            }
        }
    </style>
</head>
<body>
<div id="progress">
     <span></span>
</div>
</body>
</html>

jQuery实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顶部进度条</title>
    <style type="text/css">
        body{
            margin:0;
        }
        #progress {
            position:fixed;
            height: 2px;
            background:#2085c5;
            transition:opacity 500ms ;
        }

        #progress.done {
            opacity:0
        }
        #progress span {
            position:absolute;
            height:2px;
            -webkit-box-shadow:#2085c5 1px 0 6px 1px;
            -webkit-border-radius:100%;
            opacity:1;
            width:150px;
            right:-10px;
            -webkit-animation:pulse 2s ease-out 0s infinite;
        }

        @-webkit-keyframes pulse {
            30% {
                opacity:.6
            }
            60% {
                opacity:0;
            }
            100% {
                opacity:.6
            }
        }
    </style>
</head>
<body>
<div id="progress">
    <span></span>
</div>
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
<script type="text/javascript">
    $({property: 0}).animate({property: 100}, {
        duration: 3000,
        step: function() {
            var percentage = Math.round(this.property);

            $('#progress').css('width',  percentage+"%");

            if(percentage == 100) {
                $("#progress").addClass("done");//完成，隐藏进度条
            }
        }
    });

    /*JQuery中animation动画的参数可以有多种情况*/
</script>
</body>
</html>

利用jQuery实现的效果在当滚动条达到100%时，隐藏利用了transition实现opacity的过渡效果，所以看起来比较自然，利用CSS实现的试了下不好实现这个效果，所以放弃了。
animation中的参数有多种情况：
(1)animation(property,time,animationfun,complete)
time表示动画执行事件可以为slow(200ms),normal(400ms),fast(600ms),同时可以是数值表示持续的毫秒数，animationfun表示动画函数，complete动画执行完后的回调函数。
(2)animation（property,options）
option中的值有：
duration：动画持续时间
step：动画执行完每一步后执行的回调函数
progress：每一次动画调用的时候会执行这个回调
complete：执行完后的回调函数
progerss和step都可以实现想要的效果，只是两者的返回值和参数不一样。

属性对象可以指定多个动画属性，在进行动画时会同时变化，如果像实现动画的渐进特效，需要分开利用链式调用，即动画队列实现：

$(el).animation({height:200px,width:200px},slow)
//同时将宽度和高度变为200px
$(el).animation({height:200px},slow).animation({width:200px},slow)
//上面的动画效果就是小将高度增加到200px在变化宽度