實現效果如圖： 功能需求： ①滑鼠進入商品名稱，商品名稱變色，同時對應的物品展示圖片顯示對應的物品，滑鼠移出時候，商品名稱恢複原來的顏色 實現分析： 1.HTML+CSS頁面結構如下： 頁面結構設計中，需要註意的知識點： ①商品li設置邊框時候，只設置下邊框 ②三個列表之間的分割線，使用id為cen ...
實現效果如圖：
功能需求：
①滑鼠進入商品名稱，商品名稱變色，同時對應的物品展示圖片顯示對應的物品，滑鼠移出時候，商品名稱恢複原來的顏色
實現分析：
1.HTML+CSS頁面結構如下：
頁面結構設計中，需要註意的知識點：
①商品li設置邊框時候，只設置下邊框
②三個列表之間的分割線，使用id為center的ul 的border-right、border-left屬性
③超出大盒子的部分使用overflow:hidden
代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>淘寶精品服飾展示</title> 6 7 <style type="text/css"> 8 *{ 9 padding: 0px; 10 margin: 0px; 11 font-size: 12px; 12 } 13 ul{ 14 list-style: none; 15 } 16 a{ 17 text-decoration: none; 18 color: black; 19 } 20 .wrapper{ 21 width: 298px; 22 height: 248px; 23 margin: 100px auto 0; 24 border: 1px solid pink; 25 overflow: hidden; 26 } 27 .wrapper ul{ 28 float: left; 29 } 30 31 #left li,#right li{ 32 background: url(images/lili.jpg) repeat-x; 33 width: 48px; 34 height: 27px; 35 line-height: 27px; 36 text-align: center; 37 display: block; 38 border-bottom: 1px solid pink; 39 } 40 41 #left li:hover,#right li:hover{ 42 background: url(images/abg.gif) repeat-x; 43 } 44 45 #center{ 46 border-left: 1px solid pink; 47 border-right: 1px solid pink; 48 49 } 50 </style> 51 52 <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script> 53 <script type="text/javascript"> 54 $(function(){ 55 //獲取左側列表中所有的li,註冊滑鼠進入事件 56 $("#left>li").mouseover(function(){ 57 //獲取滑鼠當前進入的li的索引 58 var index=$(this).index(); 59 //除了當前的li,其他兄弟li全部隱藏 60 $("#center>li:eq("+index+")").siblings("li").hide(); 61 $("#center>li:eq("+index+")").show(); 62 }); 63 //獲取右側列表中所有的li,註冊滑鼠進入事件 64 $("#right>li").mouseover(function(){ 65 var index=$(this).index()+9; 66 $("#center>li:eq("+index+")").siblings("li").hide(); 67 $("#center>li:eq("+index+")").show(); 68 }); 69 }); 70 </script> 71 </head> 72 <body> 73 <div class="wrapper"> 74 <ul id="left"> 75 <li><a href="#">女靴</a></li> 76 <li><a href="#">雪地靴</a></li> 77 <li><a href="#">冬裙</a></li> 78 <li><a href="#">呢大衣</a></li> 79 <li><a href="#">毛衣</a></li> 80 <li><a href="#">棉服</a></li> 81 <li><a href="#">女褲</a></li> 82 <li><a href="#">羽絨服</a></li> 83 <li><a href="#">牛仔褲</a></li> 84 </ul> 85 86 <ul id="center"> 87 <li><a href="#"><img src="images/女靴.jpg" height="248px"></a></li> 88 <li><a href="#"><img src="images/雪地靴.jpg" height="248px"></a></li> 89 <li><a href="#"><img src="images/冬裙.jpg" height="248px"></a></li> 90 <li><a href="#"><img src="images/呢大衣.jpg" height="248px"></a></li> 91 <li><a href="#"><img src="images/毛衣.jpg" height="248px"></a></li> 92 <li><a href="#"><img src="images/棉服.jpg" height="248px"></a></li> 93 <li><a href="#"><img src="images/女褲.jpg" height="248px"></a></li> 94 <li><a href="#"><img src="images/羽絨服.jpg" height="248px"></a></li> 95 <li><a href="#"><img src="images/牛仔褲.jpg" height="248px"></a></li> 96 <li><a href="#"><img src="images/女包.jpg" height="248px"></a></li> 97 <li><a href="#"><img src="images/男包.jpg" height="248px"></a></li> 98 <li><a href="#"><img src="images/登山鞋.jpg" height="248px"></a></li> 99 <li><a href="#"><img src="images/皮帶.jpg" height="248px"></a></li> 100 <li><a href="#"><img src="images/圍巾.jpg" height="248px"></a></li> 101 <li><a href="#"><img src="images/皮衣.jpg" height="248px"></a></li> 102 <li><a href="#"><img src="images/男毛衣.jpg" height="248px"></a></li> 103 <li><a href="#"><img src="images/男棉服.jpg" height="248px"></a></li> 104 <li><a href="#"><img src="images/男靴.jpg" height="248px"></a></li> 105 </ul> 106 107 <ul id="right"> 108 <li><a href="#">女包</a></li> 109 <li><a href="#">男包</a></li> 110 <li><a href="#">登山鞋</a></li> 111 <li><a href="#">皮帶</a></li> 112 <li><a href="#">圍巾</a></li> 113 <li><a href="#">皮衣</a></li> 114 <li><a href="#">男毛衣</a></li> 115 <li><a href="#">男棉服</a></li> 116 <li><a href="#">男靴</a></li> 117 </ul> 118 </div> 119 </body> 120 </html>
jQuery實現思路：
①分別獲取左側列表、右側列表中所有的li,註冊滑鼠進入事件
$( "#left>li" ).mouseover( function(){ } );//左側
$( "#right>li" ),mouseover( function(){ } );//右側
②獲取滑鼠當前進入的li的index
var index=$( this ).index(); //該方法獲取元素的index
③右側元素的index需要上述index+9,因為中間圖片是所有的圖片放在一起，而左右的li是分開放置，為了獲得li對應的圖片，需要給右側li的索引加上左側li的數量
④滑鼠進入的li的圖片顯示，其他的圖片隱藏
$( "#center>li:eq("+index+“)" ).siblings("li").hide();
$( "#center>li:eq("+index+")").show();
註意：siblings("標簽名字") 獲取選中標簽的所有的兄弟標簽
所需素材下載地址：https://pan.baidu.com/s/11qXxk8uXgDe4JoBMw5__Rg
註意路徑的配合 images與html頁面應該為同一等級文件夾
