文中用到的圖片是500*300的尺寸
記得引入jquery的js文件

CSS部分

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

#box {
    width: 1200px;
    height: 300px;
    background-color: red;
    margin: 100px auto;
    overflow: hidden;
}

#box .list {
    width: 1300px;
    overflow: hidden;
}

#box .list li {
    float: left;
    width: 200px;
    height: 300px;
}

HTML部分

<div id="box">
    <ul class="list">
        <li><img src="img/01.jpg" alt=""></li>
        <li><img src="img/02.jpg" alt=""></li>
        <li><img src="img/03.jpg" alt=""></li>
        <li><img src="img/04.jpg" alt=""></li>
        <li><img src="img/05.jpg" alt=""></li>
        <li><img src="img/06.jpg" alt=""></li>
    </ul>
</div>

JS部分

//頁(yè)面加載
$(function(){
    //鼠標(biāo)移入事件
    $(".list>li").mouseenter(function(){
        $(this).stop().animate({"width":"500px"}).stop().siblings({"width":"143px"});
    }).mouseleave(function(){ //鼠標(biāo)移出事件
        $(this).stop().animate({"width":"200px"}).stop().siblings({"width":"200px"});
    })
})

手風(fēng)琴效果圖

手風(fēng)琴效果圖