<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
30px;
height:30px;
line-height:30px;
text-align:center;
border-radius:50%;
font-size:22px;
color:#fff;
background:red;
opacity:0;
float:left;
margin:10px;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var timer=null;
var count=0;
str="BSDBSDBSDBSDBDBSDBSDBSDBSDBSDBSDBSDBSDBSDBSDBDSDBDBDB"
for(var i=0;i<str.length;i++){ //创建与str个数一样多的div;
var oDiv=document.createElement('div');
oDiv.innerHTML=str.charAt(i);
document.body.appendChild(oDiv);
}
var aDiv=document.getElementsByTagName('div');
timer=setInterval(function(){
move(aDiv[count],{opacity:1},{time:1000});//move中的时间必须大于定时器的时间
count++;
if(count==aDiv.length){
clearInterval(timer); //控制count的大小,不能超出aDiv的length;不然会报错;
}
},100);
}
</script>
</head>
<body>
</body>
</html>
右边栏显示:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
#box{
height:470px;
200px;
position: relative;
left:1170px;
}
#box li{
200px;
height:50px;
list-style: none;
overflow: hidden;
margin-bottom:2px;
position: absolute;
right:-150px;
}
#box li span{
50px;
height:50px;
float:left;
background: red;
}
#box li em{
150px;
height:50px;
float:left;
background: #ccc;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById("box")
var aLi=oBox.getElementsByTagName('li');
var timer1=null;
var timer2=null;
var w=52;
for(var i=0;i<aLi.length;i++){
aLi[i].style.top=i*w+'px';
}
oBox.onmouseenter=function(){
var count=0;
clearInterval(timer1);
timer1=setInterval(function(){
move(aLi[count],{right:0},{time:200,easing:'ease-out'});
count++;
if(count==aLi.length){
clearInterval(timer1);
}
},100);
}
oBox.onmouseleave=function(){
var count=0;
clearInterval(timer2);
timer2=setInterval(function(){
move(aLi[count],{right:-150},{time:200,easing:'ease-out'});
count++;
if(count==aLi.length){
clearInterval(timer2);
}
},100);
}
}
</script>
</head>
<body>
<ul id="box">
<li><span></span><em></em></li>
<li><span></span><em></em></li>
<li><span></span><em></em></li>
<li><span></span><em></em></li>
<li><span></span><em></em></li>
<li><span></span><em></em></li>
<li><span></span><em></em></li>
<li><span></span><em></em></li>
<li><span></span><em></em></li>
</ul>
</body>
</html>