<!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. spring 中常用的配置项

    1.spring 中常用的配置项 application.properties #端口 server.port=8081 #调试模式 debug=false #上下文 #一般情况下,小项目通常都是在t ...

  2. TOMCAT配置管理员

      迁移时间--2017年7月9日15:16:02Author:Marydon CreateTime--2016年10月18日16:19:22Author:Marydon配置tomcat管理员参考链接 ...

  3. 用javascript写一个emoji表情插件

    概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...

  4. iOS- 快速实现展示布局

    概述 比较有规律的页面, 快速实现展示布局, 提高开发效率. 详细 代码下载:http://www.demodashi.com/demo/10713.html 看到这个界面,是不是觉得不像那种比较有规 ...

  5. 小程序三：视图层之WXML

    WXML WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. [1]数据绑定 1.1 简单绑定 数据绑定使用" ...

  6. 微信小程序之分享，动态添加分享数据

    1.效果: 2..js代码: page({ /** * 用户点击分享按钮或右上角分享 */ onShareAppMessage: function (res) { var that = this; r ...

  7. MongoDB-开始学习MongoDB(一)

    先来看看MongoDB的优缺点: 优点:简单的扩展.快速的读写.灵活的数据类型 缺点:不支持对SQL的支持.支持的特性不够丰富.现有产品不够成熟 应用场景: 适用场景: 持久化缓存层.实时的高效性(读 ...

  8. CoInitialize和CoInitializeEx

    1.CoInitialize和CoInitializeEx的功能 CoInitialize是在当前线程初始化Com组件的函数,并且初始化为STA模式(单线程模式),一般新的程序建议使用CoInitia ...

  9. Eclipse 选中变量高亮显示设置

  10. RabbitMQ与.net core(一)安装

    一.安装Erlang环境 前提:erlang版本与rabbitmq版本需按照要求对应!!! 1.在安装erlang之前先安装下依赖文件(这一步不要忘掉了, 不然后面./configure的时候要报错) ...