淘宝精品案例

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head lang="en">
  5.   <meta charset="UTF-8">
  6.   <title></title>
  7.   <style type="text/css">
  8.     * {
  9.       margin: 0;
  10.       padding: 0;
  11.       font-size: 12px;
  12.     }
  13.  
  14.     ul {
  15.       list-style: none;
  16.     }
  17.  
  18.     a {
  19.       text-decoration: none;
  20.     }
  21.  
  22.     .wrapper {
  23.       width: 298px;
  24.       height: 248px;
  25.       margin: 100px auto 0;
  26.       border: 1px solid pink;
  27.       overflow: hidden;
  28.     }
  29.  
  30.     #left,
  31.     #center,
  32.     #right {
  33.       float: left;
  34.     }
  35.  
  36.     #left li,
  37.     #right li {
  38.       background: url(images/lili.jpg) repeat-x;
  39.     }
  40.  
  41.     #left li a,
  42.     #right li a {
  43.       display: block;
  44.       width: 48px;
  45.       height: 27px;
  46.       border-bottom: 1px solid pink;
  47.       line-height: 27px;
  48.       text-align: center;
  49.       color: black;
  50.     }
  51.  
  52.     #left li a:hover,
  53.     #right li a:hover {
  54.       background-image: url(images/abg.gif);
  55.     }
  56.  
  57.     #center {
  58.       border-left: 1px solid pink;
  59.       border-right: 1px solid pink;
  60.     }
  61.   </style>
  62.  
  63.   <script src="../jquery-1.12.4.js"></script>
  64.   <script>
  65.     $(function () {
  66.  
  67.       //找不到对象
  68.       $(function () {
  69.         $("#left>li").mouseenter(function () {
  70.           $("#center>li:eq(" + $(this).index() + ")").show().siblings().hide();
  71.         });
  72.         $("#right>li").mouseenter(function () {
  73.           $("#center>li").eq($(this).index() + 9).show().siblings().hide();
  74.         });
  75.       })
  76.     });
  77.  
  78.   </script>
  79.  
  80. </head>
  81.  
  82. <body>
  83.   <div class="wrapper">
  84.  
  85.     <ul id="left">
  86.       <li><a href="#">女靴</a></li>
  87.       <li><a href="#">雪地靴</a></li>
  88.       <li><a href="#">冬裙</a></li>
  89.       <li><a href="#">呢大衣</a></li>
  90.       <li><a href="#">毛衣</a></li>
  91.       <li><a href="#">棉服</a></li>
  92.       <li><a href="#">女裤</a></li>
  93.       <li><a href="#">羽绒服</a></li>
  94.       <li><a href="#">牛仔裤</a></li>
  95.     </ul>
  96.     <ul id="center">
  97.       <li><a href="#"><img src="data:images/女靴.jpg" width="200" height="250" /></a></li>
  98.       <li><a href="#"><img src="data:images/雪地靴.jpg" width="200" height="250" /></a></li>
  99.       <li><a href="#"><img src="data:images/冬裙.jpg" width="200" height="250" /></a></li>
  100.       <li><a href="#"><img src="data:images/呢大衣.jpg" width="200" height="250" /></a></li>
  101.       <li><a href="#"><img src="data:images/毛衣.jpg" width="200" height="250" /></a></li>
  102.       <li><a href="#"><img src="data:images/棉服.jpg" width="200" height="250" /></a></li>
  103.       <li><a href="#"><img src="data:images/女裤.jpg" width="200" height="250" /></a></li>
  104.       <li><a href="#"><img src="data:images/羽绒服.jpg" width="200" height="250" /></a></li>
  105.       <li><a href="#"><img src="data:images/牛仔裤.jpg" width="200" height="250" /></a></li>
  106.       <li><a href="#"><img src="data:images/女包.jpg" width="200" height="250" /></a></li>
  107.       <li><a href="#"><img src="data:images/男靴.jpg" width="200" height="250" /></a></li>
  108.       <li><a href="#"><img src="data:images/登山鞋.jpg" width="200" height="250" /></a></li>
  109.       <li><a href="#"><img src="data:images/皮带.jpg" width="200" height="250" /></a></li>
  110.       <li><a href="#"><img src="data:images/围巾.jpg" width="200" height="250" /></a></li>
  111.       <li><a href="#"><img src="data:images/皮衣.jpg" width="200" height="250" /></a></li>
  112.       <li><a href="#"><img src="data:images/男毛衣.jpg" width="200" height="250" /></a></li>
  113.       <li><a href="#"><img src="data:images/男棉服.jpg" width="200" height="250" /></a></li>
  114.       <li><a href="#"><img src="data:images/男包.jpg" width="200" height="250" /></a></li>
  115.  
  116.     </ul>
  117.     <ul id="right">
  118.       <li><a href="#">女包</a></li>
  119.       <li><a href="#">男靴</a></li>
  120.       <li><a href="#">登山鞋</a></li>
  121.       <li><a href="#">皮带</a></li>
  122.       <li><a href="#">围巾</a></li>
  123.       <li><a href="#">皮衣</a></li>
  124.       <li><a href="#">男毛衣</a></li>
  125.       <li><a href="#">男棉服</a></li>
  126.       <li><a href="#">男包</a></li>
  127.     </ul>
  128.  
  129.   </div>
  130. </body>
  131.  
  132. </html>

jQuery---淘宝精品案例的更多相关文章

  1. JavaScript中自定义函数以及文本框、radio、下拉框的值的获取，结合淘宝竞拍案例来理解。。。

    淘宝竞拍案例: HTML部分代码: <form action="#" method="post"> <h2>欢迎进入淘宝竞拍</h ...

  2. jQuery实际案例①——淘宝精品广告(鼠标触碰切换图片、自动轮播图片)

    遇到的问题:自动轮播的实现,实质与轮播图一样儿一样儿的,不要被不同的外表所欺骗,具体的js代码如下:

  3. 基于jQuery仿淘宝产品图片放大镜代码

    今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...

  4. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  5. jQuery模仿淘宝商品评价

    最近做项目要做个商品评价的功能,我直接就跑到淘宝那里去研究了,可看着晕晕的,还不知道他是怎么做的,于是把图抠了下来,自己写了一个,接下来就展示一下我是怎么做的,大家有不同的实现方法可要记得分享一下呀. ...

  6. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  7. jquery模拟淘宝购物车

    今天要实现的一个功能页面就是利用jquery代码模拟一个淘宝网的购物车结算页面 总体页面效果如图: 首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选 ...

  8. 仿淘宝颜色属性选择展示代码（jQuery）

    模仿淘宝商品选择颜色和尺寸的效果,即选择商品颜色和尺寸的时候,把选择的颜色和尺寸放到一个页面容器里面,不足之处,还望指教. <!DOCTYPE HTML> <html lang=&q ...

  9. 淘宝：OceanBase分布式系统负载均衡案例分享

    Heroku因"随机调度+Rails单线程处理导致延迟增加的负载均衡失败"的案例之后,我们在思考:在负载均衡测试时发现问题并妥善解决的成功经验有没有?于是,挖掘出"淘宝在 ...

随机推荐

  1. 搭建fastdfs文件服务器

    一.安装FastDFS环境 1.跟踪服务器(Tracker Server) tracker1:192.168.2.134 tracker2:192.168.2.135 2.存储服务器(Storage ...

  2. opencv —— calcHist、minMaxLoc 计算并绘制图像直方图、寻找图像全局最大最小值

    直方图概述 简单来说,直方图就是对数据进行统计的一种方法,这些数据可以是梯度.方向.色彩或任何其他特征.它的表现形式是一种二维统计表,横纵坐标分别是统计样本和该样本对应的某个属性的度量. 计算直方图: ...

  3. scrapy 当当网 爬虫

    前言 好久没有写实战博客了,因为前几个月在公司实习,博客更新就耽搁了下来,现在又受疫情影响无法返校,但是技能还是不能丢的,今天就写一篇使用scrapy爬取当当网的实战练习吧. 创建scrapy项目 目 ...

  4. 伪造TGT黄金票据

    通过上一篇文章我们初步了解了Kerberos协议的工作过程,解决的两个问题 第一个问题:如何证明你本人是XXX用户的问题   由Authentication Server负责 第二个问题:提供服务的服 ...

  5. Git 工作流程和Git分支管理策略

    git-flow 阮一峰大佬写的文章真不错 git-flow, github-flow, gitlab-flow 阮一峰大佬写的文章真不错

  6. python基础之字典功能

    python中字典是个很重要的功能,使用键值(key-value)存储,具有极快的查找速度.值得注意的是,字典的key要为不可变对象,比如字符串.字母,但不能是可变的,比如列表等. 1.字典的定义: ...

  7. vue-socket.io跨域问题的解决方法

    报错信息: Access to XMLHttpRequest at 'http://192.168.37.130:5050/socket.io/?EIO=3&transport=polling ...

  8. centos安装gitlab及汉化

    GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的web服务.今天,就记录一下centos部署gitlab及其汉化的操作方法. 1.下载安装 下载地址: ...

  9. spring cloud微服务快速教程之（九） Spring Cloud Alibaba--sentinel-限流、熔断降级

    0.前言 sentinel的限流.降级功能强大,可以在控制面板中任意制定规则,然后推送到微服务中: 可以根据URL单独制定规则,也可以根据资源名批量制定规则: 需要注意的地方是:1.GITHUB文件在 ...

  10. Node.js---起步

    1.下载--安装 2.创建js文件 var http = require('http'); var url=require('url'); //引入url 模块,帮助解析 var querystrin ...