楼层效果

作者: 多多VS串串 | 来源:发表于2017-12-20 18:31 被阅读0次

楼层效果
京东楼层效果-jQuery
滚动监听楼层点亮
网站右侧楼层导航效果折腾小记
楼层
楼层
楼层
酒店楼层装饰品，能带来什么效果？
灰白楼层
楼层人生

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>楼层切换</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            li {
                list-style: none;
            }
            
            .main img {
                width: 850px;
                height: 700px;
                float: left;
            }
            
            .title {
                width: 850px;
                height: 50px;
                text-align: center;
                line-height: 50px;
            }
            
            .floor {
                position: fixed;
                top: 20px;
                right: 20px;
                display: none;
            }
            
            .floor ul li {
                width: 70px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                cursor: hand;
                cursor: pointer
            }
            
            .liStyle {
                background-color: red;
            }
            
            .loading {
                background: url("image/loading.gif") no-repeat center center;
            }
            
            #back {
                cursor: hand;
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <div class="main" id="main">
            <h3 class="title">图片欣赏</h3>
            <img as="image/1.jpg" />
            <img as="image/2.jpg" />
            <img as="image/3.jpg" />
            <img as="image/4.jpg" />
            <img as="image/5.jpg" />
            <img as="image/6.jpg" />
            <img as="image/7.gif" />
            <img as="image/8.jpg" />
            <img as="image/9.jpg" />
            <img as="image/10.jpg" />
        </div>

        <div class="floor" id="floor">
            <ul id="floorUl">
                <li>第一张</li>
                <li>第二张</li>
                <li>第三张</li>
                <li>第四张</li>
                <li>第五张</li>
                <li>第六张</li>
                <li>第七张</li>
                <li>第八张</li>
                <li>第九张</li>
                <li>第十张</li>
            </ul>
            <p id="back">返回顶部</p>
        </div>
        <script>
            var main = document.getElementById("main");
            var floor = document.getElementById("floor");
            var image = main.getElementsByTagName("img");
            var floorUl = document.getElementById("floorUl");
            var li = floorUl.getElementsByTagName("li");
            var back = document.getElementById("back");
            window.onload = window.onscroll = function() {
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var height = document.documentElement.clientHeight || document.body.clientHeight;
                for(var i = 0; i < image.length; i++) {
                    image[i].className = "loading";
                    if(delay(image[i]).top < scrollTop + height) {
                        image[i].src = image[i].getAttribute("as");
                    }
                }

                if(scrollTop >= image[0].offsetTop) {
                    floor.style.display = "block";
                } else {
                    floor.style.display = "none";
                }
                var num = 0;

                for(var i = 0; i < image.length; i++) {
                    if(scrollTop >= image[i].offsetTop) {
                        num = i;
                    }
                    li[i].className = "";
                }

                li[num].className = "liStyle";
                for(var i = 0; i < li.length; i++) {
                    li[i].onclick = function() {
                        for(var j = 0; j < li.length; j++) {
                            if(this == li[j]) {
                                document.documentElement.scrollTop = image[j].offsetTop;
                                document.body.scrollTop = image[j].offsetTop;
                            }
                        }
                    }
                }
            }

            var time = null;
            back.onclick = function() {
                function goBack() {
                    var ss = document.documentElement.scrollTop || document.body.scrollTop;
                    ss -= 50;
                    document.documentElement.scrollTop = ss;
                    document.body.scrollTop = ss;
                    if(ss <= 0) {
                        clearInterval(time);
                    }
                }
                time = setInterval(goBack, 1);
            }

            function delay(obj) {
                var l = 0;
                var t = 0;
                while(obj) {
                    l = l + obj.offsetLeft;
                    t = t + obj.offsetTop;
                    obj = obj.offsetParent;
                }
                return {
                    left: l,
                    top: t
                };
            }
        </script>
    </body>

</html>