<!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. MySQL查看表结构三种方法

    1:desc T1 2:EXPLAIN T1 3:SHOW COLUMNS FROM T1

  2. jquery之往一个CSS属性里写入多个值

    <html> <head> <title>test</title> <base href="<%=basePath%>&qu ...

  3. 修改wamp apache 默认端口

    目标:新配置一个虚拟主机,要求端口为8080,但要保证原来的80端口仍可用 1.修改 httpd.conf 开启vhost文件支持 2.httpd-vhosts.conf 中增加,记得把原来的内容全部 ...

  4. ExceptionLess 搭建到本地服务器

    Exceptionless 是一个开源的实时的日志收集框架,它可以应用在基于 ASP.NET,ASP.NET Core,Web Api,Web Forms,WPF,Console,MVC 等技术栈的应 ...

  5. 掀开图片显示介绍的css效果

    概述 主要运用到CSS3的3D transform等变换 详细 代码下载:http://www.demodashi.com/demo/10575.html 一.概述 1.主要运用到CSS3的3D tr ...

  6. java配置使用手册

    进行java开发,首先要安装jdk,安装了jdk后还要进行环境变量配置: 1.下载jdk(http://java.sun.com/javase/downloads/index.jsp),我下载的版本是 ...

  7. 【LeetCode】120. Triangle (3 solutions)

    Triangle Given a triangle, find the minimum path sum from top to bottom. Each step you may move to a ...

  8. 关于域名如何指向WordPress homepage问题的解决

    http://genuinelx.org/oldversion.php/archives/19为解决这个问题真的费了我半天的时间= = ,不写出来真的难以抒发苦闷. 下午VPS开通了,虽然有个ip被墙 ...

  9. Android之SurfaceView使用总结

    1.概念SurfaceView是View类的子类,可以直接从内存或者DMA等硬件接口取得图像数据,是个非常重要的绘图视图.它的特性是:可以在主线程之外的线程中向屏幕绘图上.这样可以避免画图任务繁重的时 ...

  10. RabbitMQ与.net core(五) topic类型 与 headers类型 的Exchange

    1.topic类型的Exchange 我们之前说过Topic类型的Exchange是direct类型的模糊查询模式,可以通过routkey来实现模糊消费message,topic的模糊匹配有两种模式: ...