js实现手风琴效果
之前在慕课网上有练习手风琴效果，但是老师使用jquery简简单单的两三行实现了，今天自己用js练习一下效果
<div id="divbox">
<ul>
<li class="pic1"><a href="javascript:;">床头明月光</a></li>
<li class="pic2"><a href="javascript:;">疑似地上霜</a></li>
<li class="pic3"><a href="javascript:;">举头望明月</a></li>
<li class="pic4"><a href="javascript:;">低头思故乡</a></li>
</ul>
</div>
*{padding: 0;margin: 0;list-style: none}
#divbox{
width: 1000px;
}
ul{
width: 1000px;
height: 300px;
}
ul li{
height: 300px;
float: left;/*
width: 100px; */
}
ul li a{
text-decoration: none;
color:#666;
width: 100px;
height: 300px;
line-height: 300px;
text-align: center;
display: block;
background-color:#fff;
opacity: 0.3;
}
.pic1{
background: url(\'1.png\');
}
.pic2{
background: url(\'2.png\');
}
.pic3{
background: url(\'3.png\');
}
.pic4{
background: url(\'4.png\');
}
.active{
width: 700px;
}
</style>
js代码：
var lis=document.getElementsByTagName(\'li\'); //获取document中的所有li
/*animate动画*/
function ani(obj){
timer=setInterval(function(){ //设置定时器
var speed=10;
if(parseInt(obj.style.width)<700){ //如果传入的对象的宽小于700px
obj.style.width=parseInt(obj.style.width)+speed+\'px\'; //让当前宽加speed
speed+=10; //每执行一次定时器，speed+10
}else{
return;
}
},20); 20ms执行一次定时器
}
for(var i=0;i<lis.length;i++){ //遍历li数组
lis[i].index=i; //循环把i的值赋值给li的index
var timer;
lis[i].onmouseover=function(){
for(var i=0;i<lis.length;i++){
lis[i].style.width=\'100px\'; //当鼠标移入到某个li时，遍历循环数组，把所有li的宽都设置为100px
}
ani(lis[this.index]); //使用ani方法，把鼠标移入的li的宽值变为700px
}
lis[i].onmouseout=function(){
lis[this.index].style.width=\'100px\'; //鼠标移出时，把当前li的宽设置回100px
clearInterval(timer); //清除定时器
}
}
这样就能实现手风琴效果了，但是还有一点点bug，因为li初始化的时候宽度是100px，当鼠标移入li时，li会变为700px，但是鼠标移开时不会按700px的宽度，仍然以100px的宽为准。如果有知道这个问题的小伙伴请大家多多指教指教。
用jquery实现非常简单，而且效果非常好：
$(function(){
$(“.handpic ul li”).mouseover(function(){
$(this).stop(true).animate({\’width\’:\’700px\’},1000).siblings().stop(true).animate({\’width\’:\’100px\’},1000);
});
});
如果想要背景图片，请到本人相册下载。
版权声明：本文为heyujun-原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。