jq实现楼层切换效果 

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        a {
            color: #000;
            text-decoration: none;
        }

        .list {
            display: none;
            width: 50px;
            position: fixed;
            height: 150px;
            left: 0;
            top: 50%;
            margin-top: -75px;
        }

        ul {
            list-style: none;
            border: 1px solid #ccc;
        }

        li {
            height: 50px;
            line-height: 50px;
        }

        li a {
            display: block;
            width: 100%;
            height: 100%
        }

        .n2 {
            border: 1px solid #ccc;
            border-left: 0;
            border-right: 0
        }

        li.active a {
            background-color: green;
            color: #fff;
        }

        .long {
            width: 500px;
            height: 800px;
        }

        .con {
            margin-left: 300px;
        }

        .floor {
            height: 500px;
            width: 500px;
            background: red;
        }

        .floor span {
            display: block;
            width: 100%;
            height: 50px;
            line-height: 50px;

            font-size: 25px;
            /*animation:scaleDisc 1s;*/
        }

        @-webkit-keyframes scaleDisc {
            0% {
                opacity: 0;
                height: 0
            }
            100% {
                opacity: 1;
                height: 50px
            }
        }

        @-moz-keyframes scaleDisc {
            0% {
                opacity: 0;
                height: 0
            }
            100% {
                opacity: 1;
                height: 50px
            }
        }

        @keyframes scaleDisc {
            0% {
                opacity: 0;
                height: 0
            }
            100% {
                opacity: 1;
                height: 50px
            }
        }
    </style>
    <meta charset="utf-8">
    <title>楼层效果</title>
</head>
<body>
<div class="list">
    <ul>
        <li><a href="#floor1" class="smooth">楼层1</a></li>
        <li class="n2"><a href="#floor2" class="smooth">楼层2</a></li>
        <li><a href="#floor3" class="smooth">楼层3</a></li>
    </ul>
</div>
<div class="long">
    内容区
</div>
<div class="con">
    <div class="long1 floor" id="floor1">
        <span>楼层1</span>
    </div>
    <div class="long2 floor" id="floor2">
        <span>楼层2</span>
    </div>
    <div class="long3 floor" id="floor3">
        <span>楼层3</span>
    </div>
</div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
    $(function () {
        $(window).scroll(function () {
            var clientH = $(window).height();
            var $scroll = $(window).scrollTop();
            //判断当楼层内容区域显示在可视窗口时，显示楼层列表，否则隐藏
            if($(".con").offset().top-$scroll<clientH){
                $(".list").css("display","block");
            }else{
                $(".list").css("display","none");
            }
            $(".floor").each(function () {
                /*var clientH = window.screen.availHeight;*/
                var $height = $(this).height();
                var $off = $(this).offset().top;
                var $index = $(this).index();
                /*if ($off + $height - $scroll >$height  && $off + $height - $scroll <= clientH) {*/
                if ($off - $scroll < clientH/2) {
                    $(this).css("background","green");
                    $(this).siblings().css("background","red");
                    $(".list li").eq($index).addClass("active");
                    $(".list li").eq($index).siblings().removeClass("active");
                } else {
                    $(this).css("background", "red");
                    $(".list li").eq($index).removeClass("active");
                }

            })

        });
        $(".smooth").on("click", function () {
            var href = $(this).attr("href");
            var $step = $(href).offset().top;
            $("body").animate({"scrollTop": $step}, 500);
            return false;
        })
    })
</script>
</html>

效果说明：

1）当楼层内容没有显示在可视区域时，隐藏楼层列表，否则显示

2）当楼层内容距离屏幕顶端距离小于屏幕可视高度的一半时，给当前楼层设置为绿色背景

3）点击楼层列表时，跳转到对应的楼层内容

 

posted @ 2016-08-10 15:21  dongxiaolei  阅读(1600)  评论(0)  编辑  收藏  举报