淘宝精品案例

<!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. css横竖屏适配

    Css做到横竖屏适配:定义两个样式 { @media screen and (orientation: portrait){ Css[竖向定义样式] } @media screen and (orie ...

  2. codewars--js--Find The Parity Outlier

    问题描述:(找出奇数数组中唯一的偶数,或是偶数数组中唯一的奇数) You are given an array (which will have a length of at least 3, but ...

  3. Mysql：MySQL数据管理

    Mysql:MySQL数据管理 外键管理 外键概念 如果公共关键字在一个关系中是主关键字,那么这个公共关键字被称为另一个关系的外键.由此可见,外键表示了两个关系之间的相关联系.以另一个关系的外键作主关 ...

  4. Linux 实时查看日志文件动态内容

    tailf 27.log | grep 'Classcomment/praise'               'Classcomment/praise' 接口名:查看请求固定接口的时间,实时 tai ...

  5. mysql 查询语句的执行顺序(重重点)

    一 SELECT语句关键字的定义顺序 SELECT DISTINCT <select_list> FROM <left_table> <join_type> JOI ...

  6. 20200117 .net 001

    第一部分:面向对象 封装 继承(里氏转换) 多态第二部分:值类型.引用类型.字符串操作第三部分:集合文件操作第四部分:正则表达式第五部分:XML操作第六部分:委托.事件第七部分:反射. 1.变量的命名 ...

  7. Linux下使用Tomcat

    切换到root账户. tomcat依赖jdk,先安装jdk,注意tomcat对jdk的版本有要求,要看一下tomcat.jdk的版本是否对应. 1.下载tomcat7 不使用软件源,自己下载安装,这样 ...

  8. 转载 CXF动态调用webservice

    /** * * @param wsdlUrl wsdl的地址:http://localhost:8001/demo/HelloServiceDemoUrl?wsdl * @param methodNa ...

  9. .Net Core通过json文件 配置管理后台导航菜单

    先来看个最终效果图 以前我们配置后台菜单 一般都是把菜单链接, 图标, 以及层级关系 配置到数据库,Core很容易通过json文件来配置导航菜单  而不用存数据库了 先添加个menuconfig.js ...

  10. 【算法】——递归：小白正在上楼梯，楼梯有n阶台阶，小白一次可以上1阶，2阶或者3阶，实现一个方法，计算小白有多少种走完楼梯的方式。

    分析:从最后一步分析,能有的情况有三种情况构成,写出如图所示的方程 //和斐波拉契相似 int void f(int n) { //考虑出口 ) ;//正常思路是返回0 ) ;//通过自己想可以得出只 ...