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

如果想要背景圖片，請到本人相冊下載。