分步运动
<html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: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; width:200px; position: relative; left:1170px; } #box li{ width:200px; height:50px; list-style: none; overflow: hidden; margin-bottom:2px; position: absolute; right:-150px; } #box li span{ width:50px; height:50px; float:left; background: red; } #box li em{ width: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>
人生如戏,或实力或演技