楼层跳跃

最新推荐文章于 2021-07-13 19:20:41 发布

斗弟

最新推荐文章于 2021-07-13 19:20:41 发布

阅读量200

点赞数

分类专栏：原生插件文章标签：楼层跳跃

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

版权

原生插件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

说明书

楼层跳跃插件使用说明：
*第一步：复制html结构，有多少层楼就保留多少个结构。
*第二步，复制样式，注意类名和样式的优先级问题。f1~f5 类名是为了好看加的，实际使用删除
*第三步：引入js(插件)
*第四步：调用即可，无需传参，FloorJump();

html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>楼层跳跃</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

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

        #slide>span:hover {
            background: pink;
        }

        .floors {
            font-size: 100px;
            text-align: center;
        }

        /* 此类名只是为了给个背景色，实际使用的时候应该删除 */
        .f1 {
            background: #58bc58;
        }

        .f2 {
            background: #448575;
        }

        .f3 {
            background: #365475;
        }

        .f4 {
            background: #99bfce;
        }

        .f5 {
            background: #c5ca96;
        }
    </style>
</head>

<body>
    <div id="ul1">
        <div class="floors f1">手机</div>
        <div class="floors f2">电脑</div>
        <div class="floors f3">手表</div>
        <div class="floors f4">相机</div>
        <div class="floors f5">电视</div>
    </div>
    <div id="slide">
        <span>01F</span>
        <span>02F</span>
        <span>03F</span>
        <span>04F</span>
        <span>05F</span>
    </div>
</body>
<script src="FloorJump.js"></script>
<script>
    /*  
    楼层跳跃插件使用说明：
        *第一步：复制html结构，有多少层楼就保留多少个结构。
        *第二步，复制样式，注意类名和样式的优先级问题。f1~f5 类名是为了好看加的，实际使用删除
        *第三步：引入js(插件)
        *第四步：调用即可，无需传参，FloorJump();
    */
    FloorJump();
</script>

</html>

FloorJump.js

function FloorJump() {
    let ul1 = document.getElementById('ul1');
    let slide = document.getElementById('slide');
    let fList = ul1.getElementsByClassName('floors');
    let spanList = slide.getElementsByTagName('span');
    let h = window.innerHeight; //获取当前窗口高度

    // 1 .让楼层的高度和可视区的高度保持一致
    for (let i = 0; i < fList.length; i++) {
        fList[i].style.height = h + 'px';  //height = 可视化窗口
        fList[i].style.lineHeight = h + 'px';   //居中
    }
    //2.点击按钮可以跳转到对应的楼层
    for (let i = 0; i < spanList.length; i++) {
        spanList[i].index = i;
        // console.log(i)
        spanList[i].onclick = function () {  //点击高亮
            // 排他
            for (let j = 0; j < spanList.length; j++) {
                spanList[j].style.background = '#eee';
            }
            this.style.background = 'orangered'; //点击选定
            let y = this.index;
            window.scrollTo(0, y * window.innerHeight)
        }
    }
    //页面滚动，楼层跟着高亮
    window.onscroll = () => {
        let scrollTop = window.scrollY;//动态获取到滚动距离
        let x = parseInt((scrollTop + h / 2) / h);   //控制一=下一楼层出现一半就高亮
        // 排他
        for (let j = 0; j < spanList.length; j++) {
            spanList[j].style.background = '#eee';
        }
        spanList[x].style.background = 'orangered';
    }
}

斗弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
楼层跳跃

说明书楼层跳跃插件使用说明：*第一步：复制html结构，有多少层楼就保留多少个结构。*第二步，复制样式，注意类名和样式的优先级问题。f1~f5 类名是为了好看加的，实际使用删除*第三步：引入js(插件)*第四步：调用即可，无需传参，FloorJump();html<html lang="en"><head> <meta charset="...
复制链接

扫一扫