資訊專欄INFORMATION COLUMN
摘要：群里的朋友提問了個問題有個進度條，當進度條出現(xiàn)在視野中的時候，開始加載，消失的時候進度條歸，不讓用動畫實現(xiàn)，，想了想，開工了。。好了，代碼大概是這樣
群里的朋友提問了個問題：
有個進度條，當進度條出現(xiàn)在視野中的時候，開始加載，消失的時候進度條歸0，不讓用css3動畫實現(xiàn)，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");
}
});
好了，代碼大概是這樣~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111493.html
摘要：群里的朋友提問了個問題有個進度條，當進度條出現(xiàn)在視野中的時候，開始加載，消失的時候進度條歸，不讓用動畫實現(xiàn)，，想了想，開工了。。好了，代碼大概是這樣 群里的朋友提問了個問題：有個進度條，當進度條出現(xiàn)在視野中的時候，開始加載，消失的時候進度條歸0，不讓用css3動畫實現(xiàn)，so，想了想，開工了。。html: ...
摘要：群里的朋友提問了個問題有個進度條，當進度條出現(xiàn)在視野中的時候，開始加載，消失的時候進度條歸，不讓用動畫實現(xiàn)，，想了想，開工了。。好了，代碼大概是這樣 群里的朋友提問了個問題：有個進度條，當進度條出現(xiàn)在視野中的時候，開始加載，消失的時候進度條歸0，不讓用css3動畫實現(xiàn)，so，想了想，開工了。。html: ...
mui 進度控件使用方法： 檢查當前容器(container控件)自身是否包含.mui-progressbar類： 當前容器包含.mui-progressbar類，則以當前容器為目標控件，直接顯示進度； 否則，檢查當前容器的直接孩子節(jié)點是否包含.mui-progressbar類，若存在，則以遍歷到的第一個含有.mui-progressbar類的孩子節(jié)點為目標控件，顯示進度； 若當前容器的直接孩子...
閱讀 2843·2021-11-19 11:35
閱讀 2590·2021-11-02 14:40
閱讀 1412·2021-09-04 16:48
閱讀 3018·2019-08-30 15:55
閱讀 1773·2019-08-30 13:11
閱讀 1965·2019-08-29 11:12
閱讀 1100·2019-08-27 10:52
閱讀 3169·2019-08-26 18:36
