淘宝精品案例

<!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. Angular RxJs：针对异步数据流编程工具

    一. RxJs:针对异步数据流编程工具 1. 创建subject类对象(发送方) 2. subject.subscribe(观察者); (注册观察者对象observer,可以注册多个相当于回调函数取数 ...

  2. JavaScrip流程控制之switch选择，for循环

    swith根据表达式的值来case ,break执行跳转语句 <!DOCTYPE html> <html lang="en"> <head> & ...

  3. Cesium案例解析(六)——3DTilesInspector监视器

    目录 1. 概述 2. 案例 1. 概述 3D Tiles作为传输和渲染大规模3D地理空间数据的格式,应对的都是大规模数据的场景,Cesium提供了一个监视3D Tiles数据的监视器,可以通过这个监 ...

  4. Django 表关系的创建

    Django 表关系的创建 我们知道,表关系分为一对多,多对多,一对一 我们以一个图书管理系统为背景,设计了下述四张表,让我们来找一找它们之间的关系 Book与Publish表 找关系:一对多 左表( ...

  5. datagridview 如何显示记载中

    要实现如下效果,有何思路?

  6. 【pattern】设计模式（3） - Observer观察者模式

    源码地址:https://github.com/vergilyn/design-patterns 另外一个大神很全的Github:https://github.com/iluwatar/java-de ...

  7. 【Git】git使用 - rebase的使用

    官方参考指南: Pro Git Book v2, § rebasing. English Pro Git Book v2, § rebase:衍合. 中文版 (建议还是看一下英文原版,就当熟练英语.) ...

  8. java-标准输入

    package InputDemo; public class InputDemo1 { public static void main(String[] args) { /* 1. java.uti ...

  9. PP: Extracting statisticla graph features for accurate and efficient time series classification

    Problem: TSC, time series classification; Traditional TSC: find global similarities or local pattern ...

  10. 在IE8的基础上安装IE11

    安装包下载 链接:https://pan.baidu.com/s/1WAuyMg_SrfVa0wLjoop5Jw   提取码:nh1r 安装方式 先运行 - EIE11_ZH-CN_WOL_WIN76 ...