<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> * {
margin: 0; padding: 0; font-size: 12px; } ul {
list-style: none; } a {
text-decoration: none; } .wrapper {
width: 250px; height: 248px; margin: 100px auto 0; border: 1px solid pink; border-right: 0; overflow: hidden; } #left, #content {
float: left; } #left li {
background: url(images/lili.jpg) repeat-x; } #left 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 {
background-image: url(images/abg.gif); } #content {
border-left: 1px solid pink; border-right: 1px solid pink; } </style>
<script src="jquery.min.js"></script>
<!-- 核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子显示相对应图片,其余的图片隐藏 -->
<!-- 需要得到当前小li的索引号,就可以显示对应索引号的图片 -->
<!-- jQuery得到当前元素的索引号 $(this).index()-->
<!-- 中间对应的图片,可以通过eq(index) 方法去选择-->
<script> $(function() {
// 1.鼠标经过左侧的小li $('#left li').mouseover(function() {
// 2.得到当前小li的索引号 var index = $(this).index() // 3.右侧相应的图片显示出来 // $('#content div').eq(index).show() // 4.让其余的图片隐藏 // $('#content div').eq(index).siblings().hide() // 链式编程写法 $('#content div').eq(index).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>
<div id="content">
<div>
<a href=""><img src="images/女靴.jpg" width="200px" height="200px"></a>
</div>
<div>
<a href=""><img src="images/雪地靴.jpg" width="200px" height="200px"></a>
</div>
<div>
<a href=""><img src="images/冬裙.jpg" width="200px" height="200px"></a>
</div>
<div>
<a href=""><img src="images/呢大衣.jpg" width="200px" height="200px"></a>
</div>
<div>
<a href=""><img src="images/毛衣.jpg" width="200px" height="200px"></a>
</div>
<div>
<a href=""><img src="images/棉服.jpg" width="200px" height="200px"></a>
</div>
<div>
<a href=""><img src="images/女裤.jpg" width="200px" height="200px"></a>
</div>
<div>
<a href=""><img src="images/羽绒服.jpg" width="200px" height="200px"></a>
</div>
<div>
<a href=""><img src="images/牛仔裤.jpg" width="200px" height="200px"></a>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css"> * {
margin: 0; padding: 0; } ul {
list-style: none; } body {
background: #000; } .wrap {
margin: 100px auto 0; width: 630px; height: 394px; padding: 10px 0 0 10px; background: #000; overflow: hidden; border: 1px solid #fff; } .wrap li {
float: left; margin: 0 10px 10px 0; } .wrap img {
display: block; border: 0; } </style>
<script src="jquery.min.js"></script>
<script> $(function() {
// 鼠标进入的时候,其他的小li透明度是0.5 $(".wrap li").hover(function() {
$(this).siblings().stop().fadeTo(400, 0.5) }, function() {
// 鼠标离开,其他小li透明度是1 $(this).siblings().stop().fadeTo(400, 1) }) }) </script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#"><img src="images/01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/06.jpg" alt="" /></a>
</li>
</ul>
</div>
</body>
</html>
