西游记手风琴案例
手风琴效果就是，鼠标经过时，它会展开，鼠标离开时，它会收缩。
手风琴效果的特点：每次只展开一个元素，其他的兄弟元素都闭合。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>西游记人物手风琴效果</title>
<style type="text/css">
h1{
text-align: center;
}
.wrap{
width: 1350px;
height: 200px;
margin:0px auto;
}
.wrap li{
list-style: none;
float: left;
}
.small{
width: 150px;
height: 200px;
opacity: 0.5;
}
.big{
width: 400px;
height: 200px;
display: none;
opacity: 1;
}
.wrap li.current.small{
display: none;
}
.wrap li.current.big{
display: block;
}
</style>
<script src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
//鼠标经过某个小li有两部操作
$('.wrap li').mouseenter(function(event){
//(1)当前小li宽度为500px,同时里面的小图片淡出,大图片淡入
$(this).animate({
width:'400px',
height:'200px',
opacity:1},500).find('.small').stop().fadeOut().
siblings().stop().fadeIn();
//(2)其余兄弟小li宽度为200px,小图淡入,大图淡出
$(this).siblings().animate({
width:'150px',
heigth:'200px',
opacity:0.5
},500).find('.small').stop().fadeIn().siblings().stop().fadeOut();
});
})
</script>
</head>
<body>
<h1>西游记手风琴效果</h1>
<hr />
<div class="wrap">
<ul>
<li class="current">
<a href="#">
<img src="tp/fmx.png" alt="封面-小" class="small" />
<img src="tp/fmd.png" alt="封面-大" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="tp/tsx.png" alt="唐僧-小" class="small" />
<img src="tp/tsd.png" alt="唐僧-大" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="tp/wkx.png" alt="孙悟空-小" class="small" />
<img src="tp/wkd.png" alt="孙悟空-大" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="tp/bjx.png" alt="猪八戒-小" class="small" />
<img src="tp/bjd.png" alt="猪八戒-大" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="tp/shsx.png" alt="沙和尚-小" class="small" />
<img src="tp/shsd.png" alt="沙和尚-大" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="tp/yjx.png" alt="妖精-小" class="small" />
<img src="tp/yjd.png" alt="妖精-大" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="tp/ygx.png" alt="妖怪-小" class="small" />
<img src="tp/ygd.png" alt="妖怪-大" class="big" />
</a>
</li>
</ul>
</div>
</body>
</html>
运行结果:
鼠标没经过前:
鼠标经过后:
图片就会展开！
浙公网安备 33010602011771号