資訊專欄INFORMATION COLUMN
摘要：群里的朋友提問了個問題有個進(jìn)度條，當(dāng)進(jìn)度條出現(xiàn)在視野中的時候，開始加載，消失的時候進(jìn)度條歸，不讓用動畫實(shí)現(xiàn)，，想了想，開工了。。好了，代碼大概是這樣
群里的朋友提問了個問題：
有個進(jìn)度條，當(dāng)進(jìn)度條出現(xiàn)在視野中的時候，開始加載，消失的時候進(jìn)度條歸0，不讓用css3動畫實(shí)現(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/80254.html
摘要：群里的朋友提問了個問題有個進(jìn)度條，當(dāng)進(jìn)度條出現(xiàn)在視野中的時候，開始加載，消失的時候進(jìn)度條歸，不讓用動畫實(shí)現(xiàn)，，想了想，開工了。。好了，代碼大概是這樣 群里的朋友提問了個問題：有個進(jìn)度條，當(dāng)進(jìn)度條出現(xiàn)在視野中的時候，開始加載，消失的時候進(jìn)度條歸0，不讓用css3動畫實(shí)現(xiàn)，so，想了想，開工了。。html: ...
摘要：群里的朋友提問了個問題有個進(jìn)度條，當(dāng)進(jìn)度條出現(xiàn)在視野中的時候，開始加載，消失的時候進(jìn)度條歸，不讓用動畫實(shí)現(xiàn)，，想了想，開工了。。好了，代碼大概是這樣 群里的朋友提問了個問題：有個進(jìn)度條，當(dāng)進(jìn)度條出現(xiàn)在視野中的時候，開始加載，消失的時候進(jìn)度條歸0，不讓用css3動畫實(shí)現(xiàn)，so，想了想，開工了。。html: ...
mui 進(jìn)度控件使用方法： 檢查當(dāng)前容器(container控件)自身是否包含.mui-progressbar類： 當(dāng)前容器包含.mui-progressbar類，則以當(dāng)前容器為目標(biāo)控件，直接顯示進(jìn)度； 否則，檢查當(dāng)前容器的直接孩子節(jié)點(diǎn)是否包含.mui-progressbar類，若存在，則以遍歷到的第一個含有.mui-progressbar類的孩子節(jié)點(diǎn)為目標(biāo)控件，顯示進(jìn)度； 若當(dāng)前容器的直接孩子...
閱讀 1900·2021-11-22 09:34
閱讀 3038·2021-09-28 09:35
閱讀 13474·2021-09-09 11:34
閱讀 3602·2019-08-29 16:25
閱讀 2833·2019-08-29 15:23
閱讀 2047·2019-08-28 17:55
閱讀 2437·2019-08-26 17:04
閱讀 3052·2019-08-26 12:21
