content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Documentul,li,body{
padding:0;
margin:0;
}
ul{
width: 200px;
height: 800px;
background-color:pink;
position:relative;
margin:60px auto;
}
li{
list-style:none;
display:inline-block;
width:100px;
height: 100px;
background-color:lightblue;
position:absolute;
left:50px;
top:0;
}
var Oul=document.getElementsByTagName("ul")[0];
var str="";
for(var i=0;i<20;i++){
str+="
";}
Oul.innerHTML=str;
var links=Oul.getElementsByTagName("li");
var i=0;
function fn(element,spet,end){
//点击一个按钮启动一次计时器,所以要在开启下一次计时器之前,先清除上一次计时器,以保证不影响下一次开启计时器;
clearInterval(element.timer);
element.timer=setInterval(function(){
element.style.top=parseInt(getStyle(element,"top"))+spet+"px";
if(parseInt(getStyle(element,"top"))>=end&&spet>0||spet<0&&parseInt(getStyle(element,"top"))<=end){
element.style.top=end+"px";
}
element.style.backgroundColor="rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")";
// 当达到样式的终点要求,就要终止计时器
if(parseInt(getStyle(element,"top"))===end){
clearInterval(element.timer);
}
},30);
}
document.body.οnclick=function(){
clearInterval(links[i].tim);
links[i].tim=setInterval(function(){
if(i%links.length
fn(links[i%links.length],3,500);
i++;
}else{
clearInterval(links[i].tim);
}
},200)
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史