群里的朋友提问了个问题:
有个进度条,当进度条出现在视野中的时候,开始加载,消失的时候进度条归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");
}
});
好了,代码大概是这样~