学了这么久的JQuery,是时候做点小小项目了
(该案例需要十二张美女图片,自己去找··················嘿嘿~~~~~)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <title>Nearth</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; } body{ background-image: url(0.jpg); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } div{ margin-left:10px; } .beauty{ width:400px; height: 240px; overflow: hidden; text-align: center; } #left,#center,#right{ float: left; } #left li,#right li{ background-color: #FFB6C1; } #left li a,#right li a{ display:block; width:100px; height:40px; border-bottom: 1px solid aqua; line-height: 40px; text-align: center; color: black; } #left li a:hover,#right li a:hover{ background-color: brown; } #center{ border-left: 3px solid orangered; border-right: 3px solid orangered; border-radius: 2px; } </style> <script> $(function(){ $("#left>li").mouseover(function(){ var index=$(this).index(); $("#center>li:eq("+index+")").siblings("li").hide(); $("#center>li:eq("+index+")").show(); }); $("#right>li").mouseover(function(){ var index=$(this).index()+6; $("#center>li:eq("+index+")").siblings("li").hide(); $("#center>li:eq("+index+")").show(); }); }); </script> </head> <body> <h1 align="center">精品美女展示案列</h1> <hr > <div id="beauty"> <ul id="left"> <li><a href="#">西施1号</a></li> <li><a href="#">西施1号</a></li> <li><a href="#">西施1号</a></li> <li><a href="#">西施1号</a></li> <li><a href="#">西施1号</a></li> <li><a href="#">西施1号</a></li> </ul> <ul id="center"> <li><a href="#"><img src="1.jpg"width="200" height="240" ></a></li> <li><a href="#"><img src="2.jpg" width="200" height="240"></a></li> <li><a href="#"><img src="3.jpg"width="200" height="240" ></a></li> <li><a href="#"><img src="4.jpg" width="200" height="240"></a></li> <li><a href="#"><img src="5.jpg" width="200" height="240"></a></li> <li><a href="#"><img src="6.jpg"width="200" height="240" ></a></li> <li><a href="#"><img src="7.jpg" width="200" height="240"></a></li> <li><a href="#"><img src="8.jpg"width="200" height="240" ></a></li> <li><a href="#"><img src="9.jpg" width="200" height="240"></a></li> <li><a href="#"><img src="10.jpg"width="200" height="240" ></a></li> <li><a href="#"><img src="11.jpg" width="200" height="240"></a></li> <li><a href="#"><img src="12.jpg"width="200" height="240" ></a></li> </ul> <ul id="right"> <li><a href="#">貂蝉1号</a></li> <li><a href="#">貂蝉1号</a></li> <li><a href="#">貂蝉1号</a></li> <li><a href="#">貂蝉1号</a></li> <li><a href="#">貂蝉1号</a></li> <li><a href="#">貂蝉1号</a></li> </ul> </div> </body> </html>