Nearth===>WEB前端--JQuery美女手风琴案例

mac2024-07-11  12

先看效果:(当鼠标经过图片,图片会自动压缩,就像手风琴一样,压缩,伸展)


<!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>

好好学习,加油奋斗~~~~~~~~~~~~~

最新回复(0)