jQuery 实现淘宝精品案例

最新推荐文章于 2022-11-19 23:50:29 发布

豆皮没有豆

最新推荐文章于 2022-11-19 23:50:29 发布

阅读量1.9k

点赞数 5

分类专栏： JQuery 文章标签： jQuery实现淘宝精品案例

本文链接：https://blog.csdn.net/qq_43434300/article/details/88992031

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

源码：

<!DOCTYPE html>
<html>
	<head>
		<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="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
		 	$(function () {
		      //找不到对象
			    $(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();
			        });
			    })
		    });
		</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>

在这里插入图片描述
图片素材可以自行更换

豆皮没有豆

关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
3
评论
jQuery 实现淘宝精品案例

源码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; ...
复制链接

扫一扫