jQuery特效实战开发 - 实例：手风琴图片切换效果

2015/06/09 23:51:58 | 作者：HTML5学堂（码匠） | 分类：jQuery实战开发 | 关键词：JQ特效,图片切换,动画,JQ,jQuery

JQ特效—手风琴

HTML5学堂：手风琴效果采用的时候jQuery插件制作，该效果采用较新颖的方式将图集展示出来。与传统的大图滚动相比，该效果更易于用户操作，用户只要把鼠标移动到某一张图片上，就可以观赏到该图片的全图，其他的图片只显示缩略图。

效果需求

在网站中，我们经常看到图集是采用大图滚动的方式向用户展示图片信息。本文为大家推荐图集的另外一种展示方式——手风琴式，手风琴式的图集展示功能是当用户鼠标移入到图片上时，当前图片能显示所有内容，其他图片只能显示一部分内容，整个效果均为渐变的过程。

效果展示

效果实现

结构代码

<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>

以上代码为手风琴效果的HTML结构，使用一个类名为wrap的div标签包裹内容，在该div下，使用了4个div来显示图片信息，采用div而不使用img是为了避免因为div的宽度变小时，图片不会被压缩。

欢迎沟通交流~HTML5学堂

样式代码

<style>
.wrap {
width: 600px;
height: 300px;
margin: 0 auto;
}
.wrap div {
float: left;
overflow: hidden;
width: 100px;
height: 100%;
}
.wrap div:nth-child(1) {
background: url("../../common/images/tea_1.jpg") center center no-repeat;
}
.wrap div:nth-child(2) {
background: url("../../common/images/tea_4.jpg") center center no-repeat;
}
.wrap div:nth-child(3) {
background: url("../../common/images/tea_6.jpg") center center no-repeat;
}
.wrap div:nth-child(4) {
background: url("../../common/images/tea_5.jpg") center center no-repeat;
}
</style>

以上代码为手风琴效果的CSS样式代码，首先给类名为wrap的div标签设置了宽高和水平居中的样式，并给该标签下的div设置宽高、浮动及超出隐藏的样式，设置了浮动之后，这4个div就处于同一行，超出隐藏会使超出宽度的内容被隐藏掉，之后为每个div设置背景图。

行为代码

<script>
$(".wrap div").eq(0).css({
"width" : "300px"
});
$(".wrap div").mouseover(function(){
$(this).stop(true).animate({
"width" : "300px"
});
$(this).siblings().stop(true).animate({
"width" : "100px"
})
})
</script>

以上代码为手风琴效果的jQuery行为代码，首先对整个效果进行初始化处理，使用.eq(0)选择类名为wrap下第一个div标签，并通过.CSS({"width" : "300px"})进行宽度的修改，初始化处理完毕。其次，给每张图片(即类名为wrap下每个div的背景图)绑定了鼠标移入事件，当用户的鼠标移入到某张图片上方时，触发预定的函数，该图片发生jQuery的.animate()动画效果，动画改变了当前图片的宽度大小。在该动画的执行过程中，其他的图片也执行另一个动画效果，该动画的内容是将这些图片的宽度还原到css中设置的初始值100px。为了避免因为用户操作速度快而导致动画冲突的问题，在动画之前，我们需要使用.stop()对未执行完毕的动画进行处理。