掉落的盒子
*{
margin: 0;
padding: 0;
text-align: center;
}
li{
margin-top: 0px;
list-style: none;
display: block;
float: left;
width: 50px;
height: 50px;
margin-left: 10px;
background-color: blue;
/*transition: all .5s;*/
position: relative;
}
ul{
height: 768px;
width: 100%;
margin: 0 auto;
}
#bigbox {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
z-index: 0;
}
#box{
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
}
<div id="bigbox">
</div>
<div id="box">
<ul class="box"></ul>
</div>
<script src="index.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var box=document.getElementsByClassName("box")[0];
var li=document.getElementsByTagName("li");
var bigbox=document.getElementById("bigbox");
var time;
for(i=0;i<20;i++){
box.innerHTML+="<li></li>";
}
var index=true;
box.onclick=function(){
var n=0;
if(index){
var time=setInterval(function(){
stobj(li[n],'top',20,500)
bigbox.style.zIndex=9999;
if(n>=19){
clearInterval(time);
bigbox.style.zIndex=0;
}
n++;
},160)
index=false;
}else{
var time=setInterval(function(){
stobj(li[n],'top',20,0)
bigbox.style.zIndex=9999;
if(n>=19){
clearInterval(time);
bigbox.style.zIndex=0;
}
n++;
},160)
index=true;
}
}
</script>
引入的js代码
function leftSty(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr]
}
}
function stobj (obj,attr,step,target) {
var left=parseInt(leftSty(obj,attr));
step=left>=target?-step:step;
var time3=setInterval(function(){
left=left+step;
//一个判断正数 第二个判断负数
if((left >= target && step > 0)||(left <= target && step <0)){
left=target;
clearInterval(time3);
}
obj.style[attr]=left+'px';//(li[0],'marginTop',11,500)
},50)
}
效果图
