關于特定位置進度條的加載

Godtoy 發布于2019-08-29 11:12 / 1955人閱讀

摘要：群里的朋友提問了個問題有個進度條，當進度條出現在視野中的時候，開始加載，消失的時候進度條歸，不讓用動畫實現，，想了想，開工了。。好了，代碼大概是這樣

群里的朋友提問了個問題：
有個進度條，當進度條出現在視野中的時候，開始加載，消失的時候進度條歸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加載進度條

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111493.html

關于特定位置進度條的加載

摘要：群里的朋友提問了個問題有個進度條，當進度條出現在視野中的時候，開始加載，消失的時候進度條歸，不讓用動畫實現，，想了想，開工了。。好了，代碼大概是這樣群里的朋友提問了個問題：有個進度條，當進度條出現在視野中的時候，開始加載，消失的時候進度條歸0，不讓用css3動畫實現，so，想了想，開工了。。html: ...

changfeng1050 2019-08-01 15:39 評論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