不带蒙版的手风琴效果
分析:
我们定义手风琴图的宽为900px, 里面有5张图片,每一张的图片的间隔应该是180px。
当鼠标移入图片的时候, 当前图片展开(560px), 剩余的四张图片压缩,每一张图片的间隔应该是85px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.carousel {
position: relative;
width: 900px;
height: 300px;
margin: 50px auto;
border: 1px solid blue;
overflow: hidden;
}
.carousel ul li {
position: absolute;
width: 560px;
height: 300px;
top: 0;
left: 0;
}
.carousel ul li.no1 {
left: 180px;
}
.carousel ul li.no2 {
left: 360px;
}
.carousel ul li.no3 {
left: 540px;
}
.carousel ul li.no4 {
left: 720px;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<ul>
<li class="no0" id="no0"><img src="images/0.jpg" alt=""></li>
<li class="no1" id="no1"><img src="images/1.jpg" alt=""></li>
<li class="no2" id="no2"><img src="images/2.jpg" alt=""></li>
<li class="no3" id="no3"><img src="images/3.jpg" alt=""></li>
<li class="no4" id="no4"><img src="images/4.jpg" alt=""></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 获取元素
var $no0 = $("#no0");
var $no1 = $("#no1");
var $no2 = $("#no2");
var $no3 = $("#no3");
var $no4 = $("#no4");
var $carousel = $("#carousel");
// 添加鼠标移入事件
$no0.mouseenter(function() {
// 防流氓
$("li").stop(true);
$no1.animate({"left": 560}, 500);
$no2.animate({"left": 560 + 85}, 500);
$no3.animate({"left": 560 + 85 * 2}, 500);
$no4.animate({"left": 560 + 85 * 3}, 500);
})
// no2添加鼠标移入事件
$no1.mouseenter(function() {
// 防流氓
$("li").stop(true);
$no1.animate({"left": 85}, 500);
$no2.animate({"left": 560 + 85}, 500);
$no3.animate({"left": 560 + 85 * 2}, 500);
$no4.animate({"left": 560 + 85 * 3}, 500);
})
// no2添加鼠标移入事件
$no2.mouseenter(function() {
// 防流氓
$("li").stop(true);
$no1.animate({"left": 85}, 500);
$no2.animate({"left": 85 * 2}, 500);
$no3.animate({"left": 560 + 85 * 2}, 500);
$no4.animate({"left": 560 + 85 * 3}, 500);
})
// no3添加鼠标移入事件
$no3.mouseenter(function() {
// 防流氓
$("li").stop(true);
$no1.animate({"left": 85}, 500);
$no2.animate({"left": 85 * 2}, 500);
$no3.animate({"left": 85 * 3}, 500);
$no4.animate({"left": 560 + 85 * 3}, 500);
})
// no4添加鼠标移入事件
$no4.mouseenter(function() {
// 防流氓
$("li").stop(true);
$no1.animate({"left": 85}, 500);
$no2.animate({"left": 85 * 2}, 500);
$no3.animate({"left": 85 * 3}, 500);
$no4.animate({"left": 85 * 4}, 500);
})
// 给carousel添加鼠标离开事件
$carousel.mouseleave(function() {
// 防流氓
$("li").stop(true);
$no1.animate({"left": 180}, 500);
$no2.animate({"left": 180 * 2}, 500);
$no3.animate({"left": 180 * 3}, 500);
$no4.animate({"left": 180 * 4}, 500);
})
</script>
</body>
</html>
注意事项:
1、此代码是不带蒙版的手风琴效果,而且代码是一般思维做的,如果需要做手风琴效果的同学请参考带蒙版的手风琴效果代码。
2、所需的jquery包代码在上传资料中下载。