<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>仿京东侧边栏</title>

     <style type="text/css">

         *{

             margin:0;padding:0;

         }

         ul{list-style: none;}

         .top,.dian,.jia,.fu,.mei,.bottom{

             width: 1210px;

             margin: 0 auto;

         }

         .subnav

         {

             position: fixed;

             width: 38px;

             height: 200px;

             top:200px;

             left:50%;

             margin-left:605px;

             /*display: none;*/

         }

         .subnav li{

             height: 36px;

             border:1px solid #DEDEDE;

             margin-bottom: 5px;

             font-size:0;

             background: url(bg.png) no-repeat;

         }

         .subnav li:hover,.subnav li.current,.back

         {

             border:1px solid #ED5759;

             background: #FDEEEE;   /* 只有冲突的时候才会出现层叠 */

             /* 背景颜色 背景图片 背景位置 背景平铺  背景固定 */

             /* css 层叠样式表 */

             font-size:12px;

             color: #ED5759;

             padding-left: 6px;

             padding-top: 2px;

             height: 34px;

             cursor: pointer;

         }

     </style>

     <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

     <script type="text/javascript">

 //     1.先找到响应的小图标；

 //     2.先让页面滚动的时候，滚动到响应的小图标那里；

 //     3.设置点击事件

         $(function(){

             var $menu=$('.subnav');

             var $list=$('.subnav li');

             var top=0;

             var num=0;

            $list.each(function(index,ele){

                var num=index*55;

                $list.css({

                   "background-position":0,num

                });

            });

             $(window).scroll(function(){

                 var top=$(document).scrollTop();

                 if(top> $('.mei').offset().top){

                     $list.eq(3).addClass('current').siblings().removeClass();

                 }else if(top> $('.fu').offset().top){

                     $list.eq(2).addClass('current').siblings().removeClass();

                 } else if(top>= $(".jia").offset().top){

                     $list.eq(1).addClass("current").siblings().removeClass();

                 } else if(top >= $(".dian").offset().top){

                     $list.eq(0).addClass("current").siblings().removeClass();

                 }else if(top>0){

                     $menu.fadeIn();

                 }else{

                     $menu.fadeOut();

                 }

             });

             $list.click(function(){

                 $('html,body').stop().animate({

                     'scrollTop':$('.jd').eq($(this).index()).offset().top

                 },1000);

             });

             $('.back').click(function(){

                 $('html,body').animate({

                     'scrollTop':0

                 },300);

             })

         })

     </script>

 </head>

 <body>

 <div class="top">

     <img src="top.png" alt="" />

 </div>

 <div class="jd dian">

     <img src="dian.png" alt="" />

 </div>

 <div class="jd jia">

     <img src="jia.png" alt="" />

 </div>

 <div class="jd fu">

     <img src="fu.png" alt="" />

 </div>

 <div class="jd mei">

     <img src="mei.png" alt="" />

 </div>

 <div class="bottom">

     <img src="bottom.png" alt="" />

 </div>

 <div class="subnav">

     <ul>

         <li>电脑数码</li>

         <li>家电通讯</li>

         <li>服饰精品</li>

         <li>美容珠宝</li>

     </ul>

     <div class="back">返回</div>

 </div>

 </body>

 </html>

jquery实现仿京东侧边栏的更多相关文章

  1. jQuery实际案例⑤——仿京东侧边栏（楼层）

    楼层:①页面滑动到哪块儿“楼层”就显示到哪个:②点击某“楼层”页面滚动到对应的位置:③点击“返回”回到页面顶部 实现:①使用$(window).scroll(function(){ });  //监视 ...

  2. jQuery实现仿京东商城图片放大镜

    效果图: 不废话直接上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. jQuery仿京东无限级菜单HoverTree

    官方网址:http://keleyi.com/jq/hovertree/ 效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list ...

  4. jQuery仿京东首页广告图片切换图片轮播

    1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. Jquery特效之=》仿京东多条件筛选特效

    仿京东多条件筛选特效 * { margin: 0; padding: 0; list-style-type: none } a, img { border: 0 } body { font: 12px ...

  6. js 鼠标滚动到某屏时，加载那一屏的数据，仿京东首页楼层异步加载模式

    js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...

  7. 仿京东树形菜单插件hovertree

    hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http://ke ...

  8. ThinkPHP3.2开发仿京东商城项目实战视频教程

    ThinkPHP3.2仿京东商城视频教程实战课程,ThinkPHP3.2开发大型商城项目实战视频 第一天 1.项目说明 2.时间插件.XSS过滤.在线编辑器使用 3.商品的删除 4.商品的修改完成-一 ...

  9. div css仿京东订单流程图样式代码

    效果展示 http://hovertree.com/texiao/css/25/ 本效果适合PC,也适合移动端 手机扫描二维码查看效果: 效果图: 代码如下: <!DOCTYPE html> ...

随机推荐

  1. Hat’s Words(字典树)

    Problem Description A hat's word is a word in the dictionary that is the concatenation of exactly tw ...

  2. 【Linux】shell数学运算

    在Bash shell环境中,可以利用let.(())和[]执行基本的算术操作.而在进行高级操作时,expr和bc这两个工具就特别有用 let的使用 Script01.sh #!/bin/bash # ...

  3. Python之L.pop()和del L[i]

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #Python之L.pop()和del L[i] #http://python.jobbole.com/826 ...

  4. centos7安装MySQL5.7无法设置密码问题

    前言 在使用centos7系统yum方式安装MySQL5.7后 不知道默认密码是多少  知道后没办法修改? 一.找到MySQL密码 service mysqld start vim /var/log/ ...

  5. Fn键

    需求分析 我想开机禁用触摸板. 方案设计 安装驱动:比较麻烦,驱动也不一定支持开机禁用触摸板. 编程实现,让一段代码开机禁用触摸板 编程实现也分好几种方法: 使用windows API禁用触摸板,这需 ...

  6. 标头“Vary:Accept-Encoding”指定方法[转]

    现在的新浏览器都支持压缩了,因此如果网站启用了GZip,可以无需再指定“Vary: Accept-Encoding”标头,不过指定“Vary: Accept-Encoding”标头会有更高的保险,而它 ...

  7. 重写 View 的 Touch 方法，实现一个酷炫的九宫格图片

    前几天翻看代码库,发现一个之前写过的一个有意思的小玩意,共享给大家

  8. iOS - UIPasteboard

    前言 NS_CLASS_AVAILABLE_IOS(3_0) __TVOS_PROHIBITED __WATCHOS_PROHIBITED @interface UIPasteboard : NSOb ...

  9. 连表查询都用Left Join吧 以Windows服务方式运行.NET Core程序 HTTP和HTTPS的区别 ASP.NET SignalR介绍 asp.net—WebApi跨域 asp.net—自定义轻量级ORM C#之23中设计模式

    连表查询都用Left Join吧   最近看同事的代码,SQL连表查询的时候很多时候用的是Inner Join,而我觉得对我们的业务而言,99.9%都应该使用Left Join(还有0.1%我不知道在 ...

  10. selenium 并发执行测试用例

    转帖: 要想多线程并发的运行WebDriver,必须同时满足2个条件,首先你的测试程序是多线程,其次需要用到Selenium Server(selenium-server-standalone-XXX ...