淘宝精品服饰案例用JQuery实现
效果图如下：
实现代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝精品服饰案例</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 252px;
height: 250px;
margin: 100px auto;
border: 1px solid pink;
overflow: hidden;
}
#left{
float: left;
}
#left li{
width: 48px;
height: 27px;
text-align: center;
border-bottom: 1px solid pink;
line-height: 27px;
padding: 0 2px;
}
#left li a{
color: #000;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function(){
$("#left li").mouseover(function(){
var index=$(this).index();
$("#content div").eq(index).show();
$("#content div").eq(index).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>
<div id="content">
<div>
<a href="#"><img src="images/nv.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/xdx.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/dq.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/ndy.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/my.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/mf.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/nk.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/yrf.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/nzk.jpg" width="200" height="250" /></a>
</div>
</div>
</div>
</body>
</html>