jQuery仿淘寶精品服飾廣告的實現
阿新 • • 發佈：2019-02-01
技術棧涉及 隱式迭代的遍歷 篩選選擇器 和為元素排序等
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿淘寶精品服飾廣告/title> <style> *{ margin: 0; padding: 0; font-size: 12px; } ul{ list-style: none; } ul li a{ text-decoration: none; } .wrapper{ width: 298px; height: 248px; margin: 100px auto 0; border: 1px solid pink; overflow: hidden; } #left,#center,#right{ float: left; } #left li,#right li{ background: url(images/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(images/abg.gif); } #center { border-left: 1px solid pink; border-right: 1px solid pink; } </style> <script type="text/javascript" src="../../js/jquery-1.11.1.min.js" ></script> <script> $(function(){ $("#left li").mouseenter(function(){ // 1.定義一個物件的變數 var $this = $(this); // 2.增加序列號 index = $this.index(); $("#center li").eq(index).show().siblings().hide(); }); $("#right li").mouseenter(function(){ // 1.定義一個物件的變數 var $this = $(this); // 2.增加序列號 index = $this.index(); $("#center li").eq(index +9).show().siblings().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="images/女靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/女褲.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/羽絨服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/牛仔褲.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/皮帶.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/圍巾.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男靴.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>
效果展示：
