jq实现楼层切换效果

时间：2016-08-10 16:01:39 阅读：1235 评论：0 收藏：0 [点我收藏+]

标签：

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

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

        .list {
            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: 600px;
        }

        .con {
            margin-left: 300px;
        }

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

        .floor span {
            display: block;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: red;
            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 () {
            $(".floor").each(function () {
                var clientH = window.screen.availHeight;
                var $height = $(this).height();
                var $scroll = $(window).scrollTop();
                var $off = $(this).offset().top;
                var $index = $(this).index();
                if ($off + $height - $scroll > 0 && $off + $height - $scroll < clientH) {
                    $(this).find("span").css("background","green");
                    $(".list li").eq($index).addClass("active");
                    $(".list li").eq($index).siblings().removeClass("active");
                } else {
                    $(this).find("span").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>

jq实现楼层切换效果

标签：

原文地址：http://www.cnblogs.com/dongxiaolei/p/5756893.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行