淘宝精品案例

<!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. win10双击执行python

    一. 设置py环境 去官网下载Windows x86-64 executable installer安装 安装后会自动配置py的bin路径和pip的路径 Pip用于安装python库的 二. 设置wi ...

  2. 微信小程序仿朋友圈功能开发（发布、点赞、评论等功能）

    微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...

  3. oracle-11g-R2监听文件配置

    客户端连接oracle数据库时出现如下错误: Listener refused the connection with the following error: ORA-, TNS:listener ...

  4. [译]Android Studio 3.6 新特性概览

    设计 设计编辑器 设计编辑器(比如布局编辑器和导航编辑器)现在提供了一个拆分视图模式,能够同时查看 UI 界面的 Design 视图和 Code 视图.拆分视图取代并改进了早期的预览窗口,并且可以对每 ...

  5. F12后面的世界（Elements篇）——重识html

    从 淘宝网, 检查元素开始探索之旅. html是什么? hyper text markup language 超文本标记语言,使用标签来描述网页 标签 语义化标签 html5新增标签 什么是超文本? ...

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

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

  7. SAP 事务代码 ME31K 报错 - 不含来自带工厂分配的供应商的物料的采购没有被定义 -

    SAP 事务代码 ME31K 报错 - 不含来自带工厂分配的供应商的物料的采购没有被定义 - 近日收到业务团队的报错说,试图创建合同,报错如下: 不含来自带工厂分配的供应商的物料的采购没有被定义 这个 ...

  8. mybatis实体为什么要提供一个无参的构造函数

    提问:Mybatis查询结果映射到实体类的时候,实体类为什么必须有一个空的构造函数? 类中如果没有构造函数,隐藏是无参构造函数,方便实体类需要通过Mybatis进行动态反射生成.如果实体类中一旦声明构 ...

  9. vuex的state选项rootState.js

    说明:本文做为vuex学习详细解(主页目录 配置主页:vuex学习配置详解(目录rootState.js文件如下 作用声明 vuex的state选项常量,并导出默认为state /** * 此文件除声 ...

  10. go单任务版爬虫

    go单任务版爬虫(爬取珍爱网) 爬虫总体算法 单任务版爬虫架构 任务 获取并打印所在城市第一页用户的详细信息 代码实现 /crawler/main.go package main import ( & ...