淘宝精品案例

<!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. Nginx安装（yum源）

    CentOS7 $ vi /etc/yum.repos.d/nginx.repo [nginx] name=nginx repo baseurl=http://nginx.org/packages/c ...

  2. vue 鼠标移入移出 列表蒙层展示

    <template> <section class="base"> <ul> <li v-for="(item, index) ...

  3. Android Binder实现浅析-Binder驱动

    简介 Android是如何实现跨进程通信的,大家熟悉的Binder是什么,怎么设计的,进程间的数据如何发送接收的.本文将以及解析,并对Binder驱动实现.Native层实现.Java层实现三块做一个 ...

  4. HTML块级、行级元素，特殊字符，嵌套规则

    如果介绍HTML网页基本标签的嵌套规则,首先要说的就是元素的分类.元素可以划分为块级元素和行级元素,块级元素是什么?它可以独占一行,可以设置宽高度,默认是100%:行级元素与之相反,它的内容决定它的宽 ...

  5. MySQL基础（6） | check约束

    MySQL基础(6) | check约束 前言 在一些情况下,我们需要字段在指定范围的输入, 例如:性别只能输入 '男'或者'女',余额只能大于0等条件, 我们除了在程序上控制以外,我们还能使用 CH ...

  6. svn cleanup 失败问题解决

    将sqlite3.exe放到.svn的同级目录 4.启动cmd执行sqlite3 .svn/wc.db "select * from work_queue" 5.启动cmd执行sq ...

  7. github page+jekyll构建博客的解决方案

    想在github page上构建自己的博客,前几个星期就动手搞了起来,但由于自己对于前端这些东西不是很熟,所以断断续续的,直到今天才把所有东西都搞懂,而且构建出自己的github博客了. 最终效果,大 ...

  8. 菜鸟linux

    //查看系统中文件的使用情况 df -h //查看当前目录下各个文件及目录占用空间大小 du -sh *//查看当期端口使用情况netstat -tlpn //find命令详见--https://ww ...

  9. Anaconda 包管理与环境管理

    包管理命令 conda命令 安装包 conda install 包名称 卸载包 conda remove 包名称 更新包 conda update 包名称 模糊查询 conda search 包名称 ...

  10. C# WPF从RIOT API获取数据(RIOT代表作品《英雄联盟》)

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. C# WPF从RIOT API获取数据(RIOT代表作品<英雄联盟>) 阅读导航 ...