原生js写手风琴
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生js手风琴特效</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.box{
width: 1050px;
height: 300px;
margin: 100px auto;
overflow: hidden;
}
.accordion li{
float: left;
width: 100px;
height: 300px;
color: #000;
font-size: 20px;
}
</style>
</head>
<body>
<p class="box">
<ul class="accordion">
<li style="background: #f99;">1</li>
<li style="background: #9ff;">2</li>
<li style="background: #f9f;">3</li>
<li style="background: #9f9;">4</li>
<li style="background: blue;">5</li>
<li style="width:450px;background: yellow;">6</li>
</ul>
</p>
<script>
function accordion(){
var obox = document.queryselector(".box");
var accordion = obox.queryselector(".accordion");
var olist = accordion.getelementsbytagname("li");
var i = 0;
var timer = null;
//console.log(olist.length);
for(var i=0;i<olist.length;i++){
olist[i].index = i;
olist[i].onmouver = function(){
var index = this.index;
if(timer){
clearinterval(timer);
}
timer = setinterval(function(){
var iwidth = obox.offsetwidth; //盒子的总宽度
//console.log(iwidth); 1050
for(var i=0;i<olist.length;i++){
if( index != olist[i].index ){
//设定速度
var speed = ( 100 - olist[i].offsetwidth) / 5;
speed = speed > 0 ? math.ceil(speed):math.floor(speed);
olist[i].style.width = olist[i].offsetwidth + speed + "px";
iwidth -= olist[i].offsetwidth;
}
olist[index].style.width = iwidth + "px";
}
},30);
}
}
}
accordion();
</script>
</body>
</html>