码迷,mamicode.com
首页 > Web开发 > 详细

JS 之手风琴效果

时间:2014-08-08 02:14:25      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:style   io   for   ar   cti   div   html   line   

<!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 之手风琴效果,布布扣,bubuko.com

JS 之手风琴效果

标签:style   io   for   ar   cti   div   html   line   

原文地址:http://my.oschina.net/u/1866497/blog/299130

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!