模仿制作京东的侧边提示栏

最新推荐文章于 2020-04-14 11:11:47 发布
最新推荐文章于 2020-04-14 11:11:47 发布
阅读量318 收藏 1
点赞数
文章标签： javascript ViewUI 
<!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>
weixin_33726318
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿京东导航侧边栏
11-09
仿照京东的侧边导航条做的，纯js,没用jquery,有兴趣的同志可以稍微参考一下
uniapp仿美团左侧菜单栏
qq_43432157的博客
01-24 4919
uniapp仿美团左侧菜单栏 实现仿美团菜单页，效果图如下 主题内容 <template> <view class="deviceList"> <!-- 左侧菜单 --> <view class="findRoom-l"> <scroll-view scroll-y="true" style="background: #fff;"> <view class="scroll-item" @click="onScroll
仿京东右侧固定栏
ASLlife的博客
04-23 2536
<script type="text/javascript" src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(".ss").hover(function(){ //dfs是当前元素的下标 var dfs = $(".ss").index(this) //...
模拟京东侧边栏
黑白两客
03-17 904
思路： // 1. 获取元素 // 1.1 获取一组li // 1.2 获取一组类名为item的div // 1.3 获取类名为slide的div // 2. 循环遍历给每一个li注册onmouseenter，并且每一个li添加一个index表示索引 // 2.1 循环遍历把所有的li的类名设置为'',把所有的item的display设置为none // 2.2 让当前的li突出显示（加类名ac...
基于html和CSS3制作简单侧边导航栏
09-24
本篇文章给大家分享基于html和CSS3制作简单侧边导航栏，效果简单大方，需要的朋友可以从参考下
html+css侧边伸缩导航栏
01-26
【html+css】侧边伸缩导航栏
bootstrap3 侧边导航栏
11-15
这是一个 bootstrap3 的侧边导航栏,东西大家应该都很熟习。希望对大家有所帮助
折叠侧边导航栏
09-22
折叠侧边导航栏 折叠侧边导航栏
bootstrap4实现侧边导航栏带隐藏按钮
12-09
用bootstrap4实现侧边导航栏并且带隐藏按钮。效果就是，点击按钮侧边导航栏出现，再点击消失。不用bootstrap也可以实现
基于vue.js实现侧边菜单栏
10-20
主要为大家详细介绍了基于vue.js实现侧边菜单栏的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
仿京东app分类特效
03-25
仿京东app分类特效 http://blog.csdn.net/xiaolinxx/article/details/22108985
仿京东左边侧边栏商品链接
06-07
想用这个东西，在网上找了，有的要钱，有的说的是仿京东的，可是还存在一些小bug，没法，自己写一个。 有一些东西可以根据自己需要添加要，不过那个鼠标放上去，显示出这个条目下的更明细的商品，据对没有问题。 只是太粗糙。可能还需要个人修改的 狠狠心，多赚点积分。 嘿嘿，为了提高上传的权限。谢谢支持哦 使用了CSS DIV Jquery
京东页面右侧悬浮代码
07-10
京东商城右侧的悬浮代码，直接拷贝到装修页面的自定义区源代码编辑，可以修改换图片，或调整位置，可以向左悬浮等等，通过热点地图更改链接，非常好
jquery仿京东侧边栏导航效果
10-20
主要为大家详细介绍了jquery仿京东侧边栏导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
仿京东侧边栏效果
songyajun_zzuli的专栏
04-14 1086
仿京东侧边栏效果，例如帮助、反馈、购物车等，不涉及到后台代码的实现，实现效果如下： 代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&gt...
仿照京东左侧菜单特效，修改的右侧菜单弹出效果
07-18
仿照京东左侧菜单特效，修改的右侧菜单弹出效果
仿美团分类导航栏
05-22
仿美团分类导航栏，用popwindow+listview方式实现！
整合了侧边栏、Tab指示器、底栏的Android APP框架(ViewPagerIndicator+SlidingMenu)
10-14
整合了侧边栏、Tab指示器、底栏的Android APP框架，使用了ViewPagerIndicator和SlidingMenu开源组件，ViewPagerIndicator和SlidingMenu请自行下载。
web制作侧边隐藏导航栏可点击代码
最新发布
08-02
要实现网页制作中侧边隐藏导航栏可点击的代码，可以使用HTML、CSS和JavaScript来完成。 首先，在HTML中创建导航栏元素。可以使用`<div>`元素，并给它一个id来标识它。例如： ```html <!-- 导航栏内容 --> ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值