先看效果：（当鼠标经过图片，图片会自动压缩，就像手风琴一样，压缩，伸展）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nearth</title>
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body{
background-image: url(0.jpg);
}
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
div{
width:1000px;
height: 200px;
margin:50px auto;
border:1px solid red;
overflow: hidden;
background-color: #FFB6C1;
}
div li{
width:200px;
height: 200px;
float: left;
}
div ul{
width:1300px;
}
img{
width:200px;
height: 200px;
}
</style>
<script>
$(function () {
$("#dv>ul>li").mouseover(function () {
$(this).siblings("li").css("width","50px");
$(this).css("width","600px");
});
$("#dv>ul>li").mouseout(function () {
$("#dv>ul>li").css("width","200px");
});
});
</script>
</head>
<body>
<h1>-------美女手风琴案例-------</h1>
<hr style="color: #00FFFF;size:6px;">
<div id="dv">
<ul>
<li><img src="1.jpg" ></li>
<li><img src="2.jpg" ></li>
<li><img src="3.jpg" ></li>
<li><img src="4.jpg" ></li>
<li><img src="5.jpg" ></li>
</ul>
</div>
</body>
</html>
好好学习，加油奋斗~~~~~~~~~~~~~
