淘宝精品案例

<!DOCTYPE html>

<html>

<head lang="en">

  <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="../jquery-1.12.4.js"></script>

  <script>

    $(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="data:images/女靴.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/雪地靴.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/冬裙.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/呢大衣.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/毛衣.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/棉服.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/女裤.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/羽绒服.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/牛仔裤.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/女包.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/男靴.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/登山鞋.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/皮带.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/围巾.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/皮衣.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/男毛衣.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data:images/男棉服.jpg" width="200" height="250" /></a></li>

      <li><a href="#"><img src="data: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>

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. java方法参数传递方式只有----值传递！

    在通常的说法中,方法参数的传递分为两种,值传递和引用传递,值传递是指将实际参数复制一份传递到方法中, 在方法中的改动将不会影响到实际参数本身,而引用传递则是指传递的是实际参数本身,在方法中的改动将会影 ...

  2. C++ char to string 方法

    1. 使用string()构造函数方法 //method 1: the constructor of string() char c = 'F'; , c); cout << s ; 2. ...

  3. Shiro -- (三) 自定义Realm

    简介: Realm:域,Shiro 从从 Realm 获取安全数据(如用户.角色.权限),就是说 SecurityManager 要验证用户身份,那么它需要从 Realm 获取相应的用户进行比较以确定 ...

  4. cir from c# 托管堆和垃圾回收

    1,托管堆基础 调用IL的newobj 为资源分配内存 初始化内存,设置其初始状态并使资源可用.类型的实列构造器负责设置初始化状态 访问类型的成员来使用资源 摧毁状态进行清理 释放内存//垃圾回收期负 ...

  5. php利用七牛云的对象存储完成图片上传-高效管理图片

    在搭建个人博客时,大家都会买一台云服务器.可是图片的存放一直是一个问题,冷月帮大家找到一个免费的第三方平台对象存储-七牛云.大家可以把图片上传到七牛云的对象存储,大大节约服务器的压力. 首先,大家在使 ...

  6. vue 使用v-for进行循环

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 开源工作流管理系统节点接收人设置“指定节点处理人”系列讲解

    关键字: 驰骋工作流程快速开发平台 工作流程管理系统 工作流引擎 asp.net工作流引擎 java工作流引擎. 开发者表单  拖拽式表单 工作流系统CCBPM节点访问规则接收人规则 适配数据库: o ...

  8. opencv —— inpaint 图像修补、去除指定区域物体

    实现图像修补.物体去除:inpaint 函数 void inpaint(InputArray src, InputArray inpaintMask, OutputArray dst, double ...

  9. TampeMonkey 关于 youtube的两个插件

    一个是 Video Speed Buttons 负责调速 一个是 YouTube Links  负责下载不同分辨率的视频

  10. 今天带来compass的使用方式

    一.为什么我们要使用compass呢 Experience cleaner markup without presentational classes. It’s chock full of the ...