我们之前在 JavaScript 鼠标滑动，图片显示隐藏 这篇博文中实现了一个简化版的手风琴效果，简而言之，手风琴效果能够帮助你，在有限的页面空间内，展示多个内容片段，使得用户能非常友好的实现多个内容片段之间的切换
HTML 结构如下
代码语言：javascript复制<div id="box">
<ul>
<li>
<img src="images/n1.jpg">
<p class="p1">Nian糕 1</p>
<p class="p2">Nian糕 1</p>
</li>
<li>
<img src="images/n2.jpg">
<p class="p1">Nian糕 2</p>
<p class="p2">Nian糕 2</p>
</li>
<li>
<img src="images/n3.jpg">
<p class="p1">Nian糕 3</p>
<p class="p2">Nian糕 3</p>
</li>
<li>
<img src="images/n1.jpg">
<p class="p1">Nian糕 4</p>
<p class="p2">Nian糕 4</p>
</li>
<li>
<img src="images/n2.jpg">
<p class="p1">Nian糕 5</p>
<p class="p2">Nian糕 5</p>
</li>
<li>
<img src="images/n3.jpg">
<p class="p1">Nian糕 6</p>
<p class="p2">Nian糕 6</p>
</li>
</ul>
</div>CSS 样式如下
代码语言：javascript复制#box {
width: 1180px;
height: 360px;
border: 4px solid #000;
margin: 100px auto;
overflow: hidden;
}
ul {
width: 2000px;
}
ul li {
width: 197px;
height: 360px;
float: left;
box-shadow: -4px 0 20px #000;
position: relative;
}
img {
width: 980px;
height: 360px;
}
p {
position: absolute;
left: 0px;
width: 100%;
height: 360px;
background: rgba(0,0,0,.3);
color: #fff;
text-align: center;
font-weight: bold;
}
.p1 {
top: 0px;
}
.p2 {
bottom: 0px;
}JS 获取到鼠标滑上去的元素、该元素的兄弟元素以及该元素的子元素，实现相应的自定义动画
代码语言：javascript复制$("#box ul li").hover(function(){
$(this).stop().animate({
"width": "960px"
},1000).siblings().stop().animate({
"width": "44px"
},1000);
$(this).find("p").stop().animate({
"height": "40px",
"line-height": "40px"
},1000);
},function(){//鼠标移开实现什么效果
$("#box ul li").stop().animate({
"width": "197px"
},1000);
$(this).find("p").stop().animate({
"height": "360px",
"line-height": "360px"
},1000);
});
运行结果本篇的内容到这里就全部结束了，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载，预览效果可点击 effect
