楼梯卡效果

最新推荐文章于 2023-11-29 20:43:57 发布

大圣非大圣

最新推荐文章于 2023-11-29 20:43:57 发布

阅读量491

点赞数

分类专栏： web前端文章标签：楼梯卡效果

本文链接：https://blog.csdn.net/jingliusheng/article/details/79384745

版权

web前端专栏收录该内容

17 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
	<!-- 导航菜单 -->
    <div id="menu">
        <ul>
            <li>1F<span>服饰</span></li>
            <li>2F<span>美妆</span></li>
            <li>3F<span>手机</span></li>
            <li>4F<span>家电</span></li>
            <li>5F<span>数码</span></li>
            <li>6F<span>运动</span></li>
            <li>7F<span>居家</span></li>
            <li>8F<span>母婴</span></li>
            <li>9F<span>食品</span></li>
            <li>10F<span>图书</span></li>
            <li>11F<span>服务</span></li>
        </ul>
    </div>
    <!-- 导航菜单 -->
    <!-- 产品内容 -->
    <div id="content">
        <div class="louti" id="louti1">服饰1</div>
        <div class="louti" id="louti2">美妆2</div>
        <div class="louti" id="louti3">手机3</div>
        <div class="louti" id="louti4">家电4</div>
        <div class="louti" id="louti5">数码5</div>
        <div class="louti" id="louti6">运动6</div>
        <div class="louti" id="louti7">居家7</div>
        <div class="louti" id="louti8">母婴8</div>
        <div class="louti" id="louti9">食品9</div>
        <div class="louti" id="louti10">图书10</div>
        <div class="louti" id="louti11">服务11</div>
    </div>
    <!-- 产品内容 -->
    <!-- 底部 -->
    <div id="footer" class="container"></div>
	</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>

#menu{
    width:32px;height:360px;
    position:fixed;
    top:200px;left:0px;
    display: none;
}
#menu ul li{
    width:32px;height:32px;
    list-style-type:none;
    color:#8F8583;
    text-align:center;
    line-height: 32px;
    border-bottom:1px dotted #ddd;
    position:relative;
}
#menu ul li span{
    display:block;width:32px;height:32px;
    background:#C81623;
    position:absolute;
    top:0;left:0;
    color:#fff;font-size:12px;
    display: none;
}
#menu ul li:hover span{display:block; }
#menu ul li span.active{color:#C81623;background:#fff;display:block;}
#content{
    width:1190px;
    margin:0 auto;
}
.louti{
	margin: 20px 0 100px;
}
#content .louti:nth-child(odd){
	color: #FFFFFF;
	background: gray;
}
#footer{width:1190px;height:600px;background:#FE7678;}
.container{margin:0 auto;}

$(function(){
        var _index=0;
        $("#menu ul li").click(function(){
            $(this).find("span").addClass("active").parent().siblings().find("span").removeClass("active");
            _index=$(this).index()+1;
            //获取元素，取得相对于文档的高度
            var _top=$("#louti"+_index).offset().top;
            //scrollTop滚动到对应高度
            $("body,html").animate({scrollTop:_top},500);
        });
        var nav=$("#menu"); //得到导航对象
        var win=$(window); //得到窗口对象
        var sc=$(document);//得到document文档对象。
        win.scroll(function(){
          if(sc.scrollTop()>=100){
           $("#menu").show();
           //获取滚动元素对应的索引!!!给对应导航添加高亮
            var index=Math.floor(sc.scrollTop()/100);

            $("#menu ul li span").eq(index-1).addClass("active").parent().siblings().find("span").removeClass("active");
          }else{
           $("#menu").hide();
          }
        });
    });