<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jquery-1.11.1/jquery-1.11.1.js"></script> <style> .wrap{ width: 660px; height: 620px; background: #000000; margin: 0 auto; padding: 2px; } li{ float: left; list-style: none; margin: 2px; } </style> <script> $(document).ready(function () { $("li").mouseenter(function () { $(this).css("opacity",1).siblings().css("opacity",0.8); }) //给div添加离开的事件 $("div").mouseleave(function () { $(this).children("ul").eq(0).children("li").css("opacity",1); }) }) </script> </head> <body> <div class="wrap"> <ul> <li> <img src="images/01.jpg"> </li> <li> <img src="images/02.jpg"> </li> <li> <img src="images/03.jpg"> </li> <li> <img src="images/04.jpg"> </li> <li> <img src="images/05.jpg"> </li> <li> <img src="images/06.jpg"> </li> <li> <img src="images/07.jpeg" style="width: 200px; height: 186px"> </li> <li> <img src="images/08.jpeg" style="width: 200px; height: 186px"> </li> <li> <img src="images/09.jpg" style="width: 200px; height: 186px"> </li> </ul> </div> </body> </html> 淘宝<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 12px; } ul { list-style: none; } a { text-decoration: none; } .wrapper { width: 300px; height: 248px; margin: 100px auto 0; border: 1px solid pink; overflow: hidden; } #left, #center, #right { float: left; } #left li, #right li { background: url(img/lili.jpg) repeat-x; } #left li a, #right li a { display: block; width: 48px; height: 27px; border-bottom: 1px solid pink; line-height: 27px; text-align: center; color: black; } #left li a:hover, #right li a:hover { background-image: url(img/abg.gif); } #center { border-left: 1px solid pink; border-right: 1px solid pink; } </style> <script src="../jquery-1.11.1/jquery-1.11.1.min.js"></script> <script> jQuery(function () { //需求：鼠标放入两侧的li中，让中间的ul中对应索引值的li显示出来，其他的隐藏。（右侧的li要+9） //左侧先绑。获取绑mouseenter $("#left li").mouseenter(function () { //显示对应索引值的中间的li //alert($(this).index()); 获取索引值 $("#center li").eq($(this).index()).show().siblings("li").hide(); }); //右侧 $("#right li").mouseenter(function () { //显示对应索引值的中间的li //alert($(this).index()); 获取索引值 $("#center li:eq("+($(this).index()+9)+")").show().siblings("li").hide(); }); }); </script> </head> <body> <div class="wrapper"> <ul id="left"> <li><a href="#">女靴</a></li> <li><a href="#">雪地靴</a></li> <li><a href="#">冬裙</a></li> <li><a href="#">呢大衣</a></li> <li><a href="#">毛衣</a></li> <li><a href="#">棉服</a></li> <li><a href="#">女裤</a></li> <li><a href="#">羽绒服</a></li> <li><a href="#">牛仔裤</a></li> </ul> <ul id="center"> <li><a href="#"><img src="img/女靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/雪地靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/冬裙.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/呢大衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/毛衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/棉服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/女裤.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/羽绒服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/牛仔裤.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/女包.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/男包.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/登山鞋.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/皮带.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/围巾.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/皮衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/男毛衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/男棉服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="img/男靴.jpg" width="200" height="250"/></a></li> </ul> <ul id="right"> <li><a href="#">女包</a></li> <li><a href="#">男包</a></li> <li><a href="#">登山鞋</a></li> <li><a href="#">皮带</a></li> <li><a href="#">围巾</a></li> <li><a href="#">皮衣</a></li> <li><a href="#">男毛衣</a></li> <li><a href="#">男棉服</a></li> <li><a href="#">男靴</a></li> </ul> </div> </body> </html>
1299
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
