欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生js写手风琴

程序员文章站 2022-06-08 20:51:09
...

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