先看效果:(当鼠标经过图片,图片会自动压缩,就像手风琴一样,压缩,伸展)
<!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>
好好学习,加油奋斗~~~~~~~~~~~~~
Nearth===>WEB前端--JQuery/美女手风琴案例
最新推荐文章于 2019-11-16 17:30:09 发布