文中用到的图片是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部分
//页面加载
$(function(){
//鼠标移入事件
$(".list>li").mouseenter(function(){
$(this).stop().animate({"width":"500px"}).stop().siblings({"width":"143px"});
}).mouseleave(function(){ //鼠标移出事件
$(this).stop().animate({"width":"200px"}).stop().siblings({"width":"200px"});
})
})
手风琴效果图
手风琴效果图
