码迷,mamicode.com
首页 > 其他好文 > 详细

14.仿京东右侧边导航栏

时间:2018-10-03 23:08:15      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:func   poi   auto   点击   com   code   美容   type   pad   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.3.1.js"></script>
    <style>
        *{
            margin:0;padding:0;
        }
        ul{list-style: none;}
        .top,.f1,.f2,.f3,.f4,.f5,.f6,.f7,.f8,.bottom{
            width: 1210px;
            margin: 0 auto;
        }
        .subnav{
            display: none;
            position: fixed;
            top: 150px;
            right: 10px;
            width: 38px;
            height: 360px;
        }
        .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,.subnav div{
            border: 1px solid #ED5759;
            background: #FDEEEE;
            padding-left: 6px;
            padding-top: 2px;
            height: 34px;
            cursor: pointer;
            color: #ED5759;
            font-size: 12px;
        }
        .subnav div{
            padding-top: 10px;
            height: 26px;
        }
    </style>
    <script>
        $(function () {
            var num=0; var top=0;
            var arr = ["家电通讯", "电脑数码", "服饰鞋包", "美容珠宝", "居家生活", "母婴玩具", "食品保健", "图书音像"]
            $("<ul></ul>").insertBefore($(".back"));
            for(var i=0;i<arr.length;i++){
                $(".subnav ul").append("<li></li>");
            }
            $(".subnav li").each(function (index,ele) {
                $(ele).html(arr[index]);
                num = index*55;
                $(ele).css("background-position","0 -"+num+"px");
            })

            //鼠标滚动
            $(window).scroll(function () {
                top = $(document).scrollTop()+50;
                if(top>=$(".f8").offset().top){
                    $(".subnav li:eq(7)").addClass("current").siblings().removeClass();
                }else if(top>=$(".f7").offset().top){
                    $(".subnav li:eq(6)").addClass("current").siblings().removeClass();
                }else if(top>=$(".f6").offset().top){
                    $(".subnav li:eq(5)").addClass("current").siblings().removeClass();
                }else if(top>=$(".f5").offset().top){
                    $(".subnav li:eq(4)").addClass("current").siblings().removeClass();
                }else if(top>=$(".f4").offset().top){
                    $(".subnav li:eq(3)").addClass("current").siblings().removeClass();
                }else if(top>=$(".f3").offset().top){
                    $(".subnav li:eq(2)").addClass("current").siblings().removeClass();
                }else if(top>=$(".f2").offset().top){
                    $(".subnav li:eq(1)").addClass("current").siblings().removeClass();
                }else if(top>=$(".f1").offset().top){
                    $(".subnav li:eq(0)").addClass("current").siblings().removeClass();
                } else if(top>50){
                    $(".subnav").fadeIn();
                } else {
                    $(".subnav").fadeOut();
                }
            })

            //鼠标点击右侧导航栏时
            $(".subnav li").click(function () {
                $("html,body").stop().animate({
                    // 给具有相同效果的元素添加 共同的样式 jd
                    "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 f1">
    <img src="f1.png" alt="" />
</div>
<div class="jd f2">
    <img src="f2.png" alt="" />
</div>
<div class="jd f3">
    <img src="f3.png" alt="" />
</div>
<div class="jd f4">
    <img src="f4.png" alt="" />
</div>
<div class="jd f5">
    <img src="f5.png" alt="" />
</div>
<div class="jd f6">
    <img src="f6.png" alt="" />
</div>
<div class="jd f7">
    <img src="f7.png" alt="" />
</div>
<div class="jd f8">
    <img src="f8.png" alt="" />
</div>
<div class="bottom">
    <img src="bottom.png" alt="" />
</div>
<div class="subnav">
    <div class="back">返回</div>
</div>
</body>
</html>

 

技术分享图片技术分享图片技术分享图片技术分享图片技术分享图片技术分享图片技术分享图片技术分享图片技术分享图片技术分享图片技术分享图片

 

14.仿京东右侧边导航栏

标签:func   poi   auto   点击   com   code   美容   type   pad   

原文地址:https://www.cnblogs.com/alex-xxc/p/9738793.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!