淘宝精品案例
案例分析：
1，鼠標(biāo)移動到左右兩邊的 li 上面，所對應(yīng)的中間的圖片就會展示出來，其余圖片隱藏
2，左邊的 li 的索引號是 0-8 , 中間圖片 li 的索引號是 0-17 ， 右邊 li 的索引號是 0-8 ，但是 右邊 li 所對應(yīng)的圖片的索引號是 9-17 ， 要加8
?
關(guān)鍵代碼
$(function(){$("#left > li").mouseenter(function(){var index=$(this).index(); //獲得所點(diǎn)擊小 li 的索引號 $("#center > li : eq("+index+")").show().siblings.hide(); //index是變量，不能直接寫成 $("#center > li : eq(index)")})$("#right >li ").mouseenter(function(){var index=$(this).index()+9; //右邊圖片的索引號要 加 9 $("#center > li").eq(index).show().sibings.hide(); //$("#center > li").eq(index) == $("#center > li : eq("+index+")") ; 等號前的常用}) })?
完整代碼
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;font-size: 12px;}ul {list-style: none;}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 src="../jquery-1.12.4.min.js"></script><script>//找不到對象 $(function () {$("#left>li").mouseenter(function () {$("#center>li:eq(" + $(this).index() + ")").show().siblings().hide();});$("#right>li").mouseenter(function () {$("#center>li").eq($(this).index() + 9).show().siblings().hide();});});// $("#left>li").mouseenter(function () {// //讓center中對應(yīng)下標(biāo)的li顯示，其他li隱藏// var idx = $(this).index();// $("#center>li:eq(" + idx + ")").show().siblings().hide();// });//// $("#right>li").mouseenter(function () {// var idx = $(this).index() + 9;// $("#center>li").eq(idx).show().siblings().hide();//// //$("#center>li").eq(idx) :jq對象// //$("#center>li").get(idx);：js對象// });// });</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>?
轉(zhuǎn)載于:https://www.cnblogs.com/shanlu0000/p/11518297.html
總結(jié)
- 上一篇： SQL Server直接执行.sql文件
- 下一篇： DR-CAN的工程数学基础学习笔记（2）