js简单实现楼层跳跃

最新推荐文章于 2021-07-15 10:51:22 发布

斗弟

最新推荐文章于 2021-07-15 10:51:22 发布

阅读量1k

点赞数

分类专栏：案例源码文章标签： js楼层跳跃

本文链接：https://blog.csdn.net/L_Lintellect/article/details/98480066

版权

案例源码专栏收录该内容

3 篇文章 0 订阅

订阅专栏

楼层跳跃的简单案例。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>楼层跳跃</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #totop {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            position: fixed;
            right: 20px;
            bottom: 100px;
            cursor: pointer;
            /* display: none; */
        }

        img {
            width: 100%;
            height: 100%;
        }

        ul,
        li {
            text-align: center;
            list-style: none;
        }

        li {
            font-size: 100px;
            color: #ccc;
        }

        li:nth-child(1) {
            background: #58a;
        }

        li:nth-child(2) {
            background: #58e;
        }

        li:nth-child(3) {
            background: #58bc58;
        }

        li:nth-child(4) {
            background: #3aa;
        }

        li:nth-child(5) {
            background: #a8a;
        }

        #slide {
            position: fixed;
            width: 50px;
            left: 20px;
            top: 100px;
        }

        span {
            float: left;
            display: block;
            text-align: center;
            line-height: 50px;
            width: 50px;
            height: 50px;
            margin-top: 10px;
            background: #eee;
            cursor: pointer;
        }

        span:hover {
            background: rgb(201, 25, 69);
        }


        .choosed {
            background: pink;
        }
    </style>
</head>

<body>
    <ul id="ul1">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
    </ul>
    <div id="slide">
        <span>01F</span>
        <span>02F</span>
        <span>03F</span>
        <span>04F</span>
        <span>05F</span>
    </div>
    <div id="totop">
        <img src="../images/rocket.jpg" title="回到顶部">
         /* 回顶部按钮的图片，可以不要 */
    </div>
</body>
<script>

    (function () {
        var ul1 = document.getElementById('ul1');
        var slide = document.getElementById('slide');
        var list = document.getElementsByTagName('li');
        var spanList = document.getElementsByTagName('span');

        var h = window.innerHeight; //获取当前窗口高度

        // 1 .让楼层的高度和可视区的高度保持一致
        for (var i = 0; i < list.length; i++) {
            spanList[i].index = i;
            list[i].style.height = h + 'px';  //height = 可视化窗口
            list[i].style.lineHeight = h + 'px';   //居中
        }
        //2.点击按钮可以跳转到对应的楼层
        for (var i = 0; i < spanList.length; i++) {
            spanList[i].index = i;

            spanList[i].onclick = function () {
                // 排他
                for (var j = 0; j < spanList.length; j++) {
                    spanList[j].className = '';
                }
                this.className += 'choosed'; //点击选定
                var y = this.index;
                window.scrollTo(0, y * window.innerHeight)

            }
            //鼠标移进
            var floor = ['手机', '电脑', '手表', '相机', '电视']
            spanList[i].onmouseover = function () {
                var n = this.index
                this.innerHTML = floor[n];
            }
            //鼠标离开，恢复原样
            spanList[i].onmouseleave = function () {
                var old = ['01F', '02F', '03F', '04F', '05F']
                for (var i = 0; i < spanList.length; i++) {
                    spanList[i].innerHTML = old[i];
                }
            }
            //滚动楼层数跟着变
        }

        //页面滚动，楼层跟着高亮，回顶部事件
        window.onscroll = function () {
            var scrollTop = window.scrollY;//动态获取到滚动距离
            var x = parseInt(scrollTop / h);
            // 排他
            for (var j = 0; j < spanList.length; j++) {
                spanList[j].className = '';
            }
            spanList[x].className = 'choosed';
            console.log(scrollTop);
            //回顶部火箭图
            if (scrollTop >= 300) {
                totop.style.display = 'block'
            } else {
                //top_img.src = '../images/rocket.jpg';  //点击回顶部的图片
                totop.style.display = 'none'
            }
        }

        //回顶部
        var totop = document.getElementById('totop');
        var top_img = totop.getElementsByTagName('img')[0];
        // console.log( top_img.title)

        var num = 180;
        var fuck = setInterval(function () {
            num -= 5;
        }, 1000);

        totop.onclick = function () {
            top_img.src = '../images/rocket.gif';
            var scrollTop = window.scrollY;  //获取当前滚动距离

            var timer = setInterval(function () {
                scrollTop -= num;
                if (scrollTop <= 0) {
                    clearInterval(timer);
                }
                window.scrollTo(0, scrollTop);   //回顶部
            }, 30);
        }
    })();

</script>

</html>

斗弟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js简单实现楼层跳跃

楼层跳跃的简单案例。<html lang="en"><head> <meta charset="UTF-8"> <title>楼层跳跃</title> <style> * { margin: 0; padding: 0; ...
复制链接

扫一扫

专栏目录