jQuery—-淘宝商品展示(类似与tab切换)

实现效果如图:

               

 

功能需求:

①鼠标进入商品名称,商品名称变色,同时对应的物品展示图片显示对应的物品,鼠标移出时候,商品名称恢复原来的颜色

 

实现分析:

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页面应该为同一等级文件夹

相关文章