关于特定位置进度条的加载

2024年4月23日 176次阅读 来源: KissDuo

群里的朋侪提问了个题目：
有个进度条，当进度条出现在视野中的时刻，最先加载，消逝的时刻进度条归0，不让用css3动画完成，so，想了想，完工了。。
html:

<div class="main">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block">
        <div class="progress">
            <div class="progressItem" style="width: 0px;"></div>
        </div>
    </div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

css:

.main{
    width:1000px;
    margin:0 auto;
}
.main .block{
    width:100%;
    height:500px;
    background-color:yellow;
    margin-bottom:20px;
}
.main .progress{
    width:50%;
    height:50px;
    margin:0 auto;
    border:1px solid #ebebeb;
}
.main .progress .progressItem{
    background-color:green;
    width:0;
    height:50px;
}

js:

$(window).scroll(function(){
    if(($(window).scrollTop()+$(window).height())>$(".progress").offset().top){
        if(($(window).scrollTop()<$(".progress").offset().top+$(".progress").height())){
            $(".progressItem").animate({
                width:"100%",
            },5000);
        }else{
            $(".progressItem").stop(true,true).css("width","0px");
        }    
    }else{
        $(".progressItem").stop(true,true).css("width","0px");
    }
});

好了，代码大概是如许~

    原文作者：KissDuo
    原文地址: https://segmentfault.com/a/1190000006760295
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞