jquery淘宝精品案例
jquery淘宝精品案例
html:
<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>
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(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;
}jq:
<script src="js/jquery-3.5.1.min.js"></script>
<script>
/* 需求：鼠标悬浮在哪个超链中，中间显示什么样的图片 */
$(function(){
// 给左侧的 ul无序列表中的 每一个li 注册 mouseenter鼠标移入事件
$('#left>li').mouseenter(function(){
// // 1.找 中间区域 对应的li元素
// $('#center li:eq('+$(this).index()+')').show();
// // 2. 中间区域 对应的li元素 的 所有的 兄弟元素li 隐藏起来
// $('#center li:eq('+$(this).index()+')').siblings().hide();
$('#center li:eq('+$(this).index()+')').show().siblings().hide();
})
// 给右侧的 ul无序列表中的 每一个li 注册 mouseenter鼠标移入事件
$('#right>li').mouseenter(function(){
var _index = $(this).index()+9;
console.log(_index);
$('#center li:eq('+_index+')').show().siblings().hide();
})
});
</script>分析：
mouseenter() 注册 鼠标移入事件----mouseenter([[data],fn])当鼠标指针穿过元素时，会发生 mouseenter 事件。
$(this).index()
index([selector|element]) 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
$("#center>li:eq("+$(this).index()+")")
show() 显示隐藏的匹配元素。
siblings() 找 同辈的兄弟元素（集合）
hide() 隐藏显示的元素
