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);
　　});
});

如果想要背景图片，请到本人相册下载。