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

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

巴特西

js实现手风琴效果

最新文章

热门文章