JS 之手风琴效果

<!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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。