JS 之手风琴效果

浏览数：25 / 时间：2015年06月09日

 
 <!DOCTYPE html> 
 
 <html> 
 
 <head> 
 
 <meta charset= 
 "utf-8" 
 /> 
 
 <title></title> 
 
 <meta content= 
 " "  
 />  
 
 <meta content= 
 " "  
 /> 
 
 <style> 
 
 #c{width:500px;height:300px;overflow:hidden;background:#ccc;} 
 
 p { float:left;width:20px;height:300px;} 
 
 </style> 
 
 </head> 
 
 <body> 

 <div id= 
 "c" 
 > 
 
 <p style= 
 "background:#9cf;width:420px;" 
 >1</p> 
 
 <p style= 
 "background:#f9c;" 
 >2</p> 
 
 <p style= 
 "background:#c9f;" 
 >3</p> 
 
 <p style= 
 "background:#cf9;" 
 >4</p> 
 
 <p style= 
 "background:#9fc;" 
 >5</p> 
 
 </div> 
 
 <script > 
 
 function  
 accordion(Id,Tag,Long,Short){ 
 
 var  
 Div=document.getElementById(Id); 
 
 var  
 Divs=Div.getElementsByTagName(Tag); 
 
 var  
 i=0; 
 
 var  
 t= 
 null 
 ; 
 
 for 
 (i=0;i<Divs.length;i++){ 
 
 Divs[i].index=i; 
 
 Divs[i].onmouseover= 
 function  
 (){ 
 
 var  
 index= 
 this 
 .index; 
 
 if 
 (t){clearInterval(t);} 
 
 t=setInterval( 
 function  
 (){ 
 
 var  
 iWidth=Long; 
 
 for 
 (i=0;i<Divs.length;i++){ 
 
 if 
 (index!=Divs[i].index){ 
 
 var  
 iSpeed=(Short-Divs[i].offsetWidth)/5; 
 
 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 
 
 Divs[i].style.width=Divs[i].offsetWidth+iSpeed+ 
 ‘px‘ 
 ; 
 
 iWidth-=Divs[i].offsetWidth; 
 
 }; 
 
 }; 
 
 Divs[index].style.width=iWidth+ 
 ‘px‘ 
 ; 
 
 }, 30); 
 
 }; 
 
 } 
 
 } 
 
 </script> 
 
 </body> 
 
 </html> 

JS 之手风琴效果,古老的榕树,5-wow.com