<!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. jQuery实现页面关键词高亮

    示例代码,关键位置做了注释,请查看代码: <html> <head> <title>jQuery实现页面关键词高亮</title> <style ...

  2. Linux see 网卡当前流量

    linux see网卡的当前流量 sar –n DEV  1 2  命令后面1 2 意思是:每一秒钟取1次值,取2次. DEV显示网络接口信息 -n参数很有用,他有6个不同的开关:DEV | EDEV ...

  3. assert语句(assert用来判断语句的真假)

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #Python学习手册 868 #assert语句(assert用来判断语句的真假) #案例 mylist=[ ...

  4. linux too many open files报错

    修改方法:vi /etc/security/limits.conf  增加一行,如下: *       -       nofile          65535 修改vi /etc/ssh/sshd ...

  5. 从零开始学做微信小程序，看这些就够了！

    随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中.小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序?此文,将列出OSC上 ...

  6. 转载：【微信小程序】 wx:if 与 hidden(隐藏元素)区别

    条件渲染 顾名思义所谓的条件渲染,就是通过条件来判断是否需要渲染该代码块.条件渲染主要是用到wx:if 和 block wx:if 这两个,第一个相信好理解,第二个是在block里面进行条件渲染,这里 ...

  7. IE和火狐兼容常见问题

    文章转自http://www.cnblogs.com/asqq/archive/2013/03/09/3194994.html 1,document.form.item/document.ID IE中 ...

  8. mysql高效索引之覆盖索引

    概念 如果索引包含所有满足查询需要的数据的索引成为覆盖索引(Covering Index),也就是平时所说的不需要回表操作 判断标准 使用explain,可以通过输出的extra列来判断,对于一个索引 ...

  9. SpringBoot使用拦截器

    SpringBoot的拦截器只能拦截流经DispatcherServlet的请求,对于自定义的Servlet无法进行拦截. SpringMVC中的拦截器有两种:HandlerInterceptor和W ...

  10. 如何在Access2007中使用日期类型查询数据

    select * from 表 where datediff("d",日期型的字段,#2008-09-01#)=0或select * from 表 where 日期型的字段 > ...