前言
主要我们来练习jQuery语法，这是我在学习jQuery时写的案例，感觉比较有意思。大家可以看一下，运用到你们自己写的网页中。
一、html代码及说明
这个结构主要是用div装ul li里面放两张图片(一张大图一张小图)，一张为大图，一张为小图。先展示小图，鼠标放到图片上后用缓慢动画变成大图片。
我这里是准备演示4个图片的缩放，所以代码如下：
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="../img/四大美女/dc.jpg" class="small">
<img src="../img/四大美女/dc.jpg" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/四大美女/wzj.jpg" class="small">
<img src="../img/四大美女/wzj.jpg" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/四大美女/xx.jpg" class="small">
<img src="../img/四大美女/xx.jpg" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/四大美女/yyh.jpg" class="small">
<img src="../img/四大美女/yyh.jpg" class="big">
</a>
</li>
</ul>
</div>二、css代码及说明
首先平铺li 然后让第一个图显示大图（隐藏小图），其余的图全显示小图（隐藏大图）如下图所示
![jQuery实现折叠卡片[代码+详细讲解+效果图]](https://img-blog.csdnimg.cn/b0fe512dd16f4830a1f4134093a21574.png)
代码如下：
* {
margin: 0;
padding: 0;
}
/* 大盒子 */
.king {
width: 1400px;
height: 200px;
}
/* ul去黑点 */
.king ul {
list-style: none;
width: 100%;
}
/* li样式 */
.king ul li {
position: relative;
top: 0px;
left: 0px;
float: left;
width: 200px;
height: 200px;
}
/* 第一个显示大图li宽变成图片宽 */
.king ul .current {
width: 400px;
}
/* 大图样式 用定位把大图和小图叠起来，使宽度还为大图的宽度 而不是大图+小图的宽度*/
.king ul li a .big {
position: absolute;
left: 0px;
top: 0px;
width: 400px;
height: 200px;
display: none;
}
/* 小图样式 */
.king ul li a .small {
position: absolute;
left: 0px;
top: 0px;
width: 200px;
height: 200px;
}
/* 第一个先显示大图 */
.king ul .current a .big {
display:inline-block;
}
/* 把第一个小图隐藏 */
.king ul .current a .small {
display: none;
}
三、js代码及说明
在用jQuery之前必须引入jQuery文件：
<script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script>当鼠标放到某个li身上时，用到排他思想：
1.当前小li宽度变成400px（大图的宽度），同时小图淡出，大图淡入。
2.其余兄弟小li宽度为200px,小图淡入，大图淡出。
代码：
$(function(){
// 鼠标经过
$(".king li").mouseenter(function(){
// 1.当前小li宽度变成400px，同时小图淡出，大图淡入
$(this).stop().animate({
width:400
},200).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 2.其余兄弟小li宽度为200px,小图淡入，大图淡出
$(this).siblings("li").stop().animate({
width:200
},200).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
})这里fadeOut()就是淡出效果，fadeIn()是淡入效果。注意stop()是在做效果时要先停止上一次鼠标经过的操作，防止鼠标在短时间内经过多个图片发生排队效果。
四、完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 大盒子 */
.king {
width: 1400px;
height: 200px;
}
/* ul去黑点 */
.king ul {
list-style: none;
width: 100%;
}
/* li样式 */
.king ul li {
position: relative;
top: 0px;
left: 0px;
float: left;
width: 200px;
height: 200px;
}
/* 第一个显示大图li宽变成图片宽 */
.king ul .current {
width: 400px;
}
/* 大图样式 用定位把大图和小图叠起来，使宽度还为大图的宽度 而不是大图+小图的宽度*/
.king ul li a .big {
position: absolute;
left: 0px;
top: 0px;
width: 400px;
height: 200px;
display: none;
}
/* 小图样式 */
.king ul li a .small {
position: absolute;
left: 0px;
top: 0px;
width: 200px;
height: 200px;
}
/* 第一个先显示大图 */
.king ul .current a .big {
display:inline-block;
}
/* 把第一个小图隐藏 */
.king ul .current a .small {
display: none;
}
</style>
</head>
<body>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="../img/四大美女/dc.jpg" class="small">
<img src="../img/四大美女/dc.jpg" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/四大美女/wzj.jpg" class="small">
<img src="../img/四大美女/wzj.jpg" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/四大美女/xx.jpg" class="small">
<img src="../img/四大美女/xx.jpg" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/四大美女/yyh.jpg" class="small">
<img src="../img/四大美女/yyh.jpg" class="big">
</a>
</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
// 鼠标经过
$(".king li").mouseenter(function(){
// 1.当前小li宽度变成400px，同时小图淡出，大图淡入
$(this).stop().animate({
width:400
},200).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 2.其余兄弟小li宽度为200px,小图淡入，大图淡出
$(this).siblings("li").stop().animate({
width:200
},200).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
})
</script>
</body>
</html>
五、效果图
鼠标没有经过图片时效果图：
![jQuery实现折叠卡片[代码+详细讲解+效果图]](https://img-blog.csdnimg.cn/17595677f1604a51b18a75972f1cf70b.png)
鼠标经过第二张图效果（默认就是第一张显示大图）：
![jQuery实现折叠卡片[代码+详细讲解+效果图]](https://img-blog.csdnimg.cn/885788ff59704ec0a13a39ccf9965349.png)
鼠标经过第三张图效果：
![jQuery实现折叠卡片[代码+详细讲解+效果图]](https://img-blog.csdnimg.cn/d8a0668fcf8d49a0a087911bb3e0373b.png)
第四张图也是一样，和我们分析写代码时一样。
总结
这里因为放的是图片，体现不出来图片淡入淡出的效果，还有缓慢动画的效果。感兴趣的可以自己运行体验一下。。。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/114666.html
