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

changfeng1050 发布于2019-08-01 15:39 / 2802人阅读

摘要：群里的朋友提问了个问题有个进度条，当进度条出现在视野中的时候，开始加载，消失的时候进度条归，不让用动画实现，，想了想，开工了。。好了，代码大概是这样

群里的朋友提问了个问题：
有个进度条，当进度条出现在视野中的时候，开始加载，消失的时候进度条归0，不让用css3动画实现，so，想了想，开工了。。
html:

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");
    }
});

好了，代码大概是这样~

云服务器 GPU云服务器加载进度进度加载 js进度加载 ajax加载进度条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50029.html

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

摘要：群里的朋友提问了个问题有个进度条，当进度条出现在视野中的时候，开始加载，消失的时候进度条归，不让用动画实现，，想了想，开工了。。好了，代码大概是这样群里的朋友提问了个问题：有个进度条，当进度条出现在视野中的时候，开始加载，消失的时候进度条归0，不让用css3动画实现，so，想了想，开工了。。html: ...

Godtoy 2019-08-29 11:12 评论0 收藏0
关于特定位置进度条的加载

摘要：群里的朋友提问了个问题有个进度条，当进度条出现在视野中的时候，开始加载，消失的时候进度条归，不让用动画实现，，想了想，开工了。。好了，代码大概是这样群里的朋友提问了个问题：有个进度条，当进度条出现在视野中的时候，开始加载，消失的时候进度条归0，不让用css3动画实现，so，想了想，开工了。。html: ...

zzbo 2019-08-20 10:39 评论0 收藏0
mui进度条使用解析

mui 进度控件使用方法：检查当前容器(container控件)自身是否包含.mui-progressbar类：当前容器包含.mui-progressbar类，则以当前容器为目标控件，直接显示进度；否则，检查当前容器的直接孩子节点是否包含.mui-progressbar类，若存在，则以遍历到的第一个含有.mui-progressbar类的孩子节点为目标控件，显示进度；若当前容器的直接孩子...

mist14 2019-08-21 16:27 评论0 收藏0