楼梯导航

最新推荐文章于 2024-12-05 10:07:35 发布

小哥家的小费

最新推荐文章于 2024-12-05 10:07:35 发布

阅读量658

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签：楼梯导航

本文链接：https://blog.youkuaiyun.com/WeiAiGeWangFeiYuQing/article/details/85641522

JS 专栏收录该内容

20 篇文章

订阅专栏

本文深入探讨楼梯导航这一主题，解析其在智能建筑和无障碍设施中的应用，介绍如何利用现代技术实现精准的楼梯导航解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

楼梯导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>楼梯导航</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body, html{height: 100%;}
        ul{list-style: none;height: 100%;}
        ul li{height: 100%;}
        ol{list-style: none;position: fixed;top:0;left: 500px;}
        ol li{float:left;width: 50px;height: 50px;border: 1px solid #000;text-align: center;
            line-height: 50px;margin-top: -1px;cursor: pointer;}
    </style>
</head>
<body>
<ul>
    <li>第一区域</li>
    <li>第二区域</li>
    <li>第三区域</li>
    <li>第四区域</li>
</ul>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>
<script>
// 点击ol的li，屏幕滑动到对应的ul的li
// 利用window.scrollTo()；缓动动画实现
var ul = document.getElementsByTagName("ul")[0];
var ol = document.getElementsByTagName("ol")[0];
var ulLiArr = ul.children;
var olLiArr = ol.children;
var target = 0;//目标索引
var leader = 0;//目标元素top到浏览器顶部距离
var timer = null;
// 1. 指定ul和ol中li的背景色，对应li的背景色相同
var arrColor = ["green","orange","yellow","red","gold"];
// 利用for循环给两个数组中的元素上色
for(var i=0; i<arrColor.length; i++){
    ulLiArr[i].style.backgroundColor = arrColor[i];
    olLiArr[i].style.backgroundColor = arrColor[i];
    // 属性绑定索引值
    olLiArr[i].index = i;
    // 循环绑定，为每一个li绑定点击事件
    olLiArr[i].onclick =function(){
    // 获取目标位置
        target = ulLiArr[this.index].offsetTop;
        console.log("目标位置偏移target："+target);
        clearInterval(timer);
        // 利用缓动动画原理实现屏幕滑动
        timer = setInterval(function(){
            // (1).获取步长
            var step = (target-leader)/10;
            console.log("步长step："+step);
            // (2).二次处理步长
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            console.log("二次步长step："+step);
            // (3).屏幕滑动
            leader = leader + step;
            console.log("到顶部距离leader="+leader);
            window.scrollTo(0, leader);
            // (4).清除定时器
            if(Math.abs(target-leader) <= Math.abs(step)){
                window.scrollTo(0, target);
                clearInterval(timer);
            }
        }, 25);
    };
    // 用scroll事件模拟盒子距离最顶端的距离
    window.onscroll = function(){
    // 每次屏幕滑动，把屏幕卷去的值赋给leader，模拟获取显示区域距离顶部的距离
        leader = scroll().top;
        console.log("区域到顶部距离leader："+leader);
    }
}
function scroll() {
    // 开始封装自己的scrollTop
    if(window.pageYOffset !== undefined) {
        // ie9+ 高版本浏览器
        // 因为 window.pageYOffset 默认的是0,所以需要判断
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode === "CSS1Compat") {
        // 标准浏览器,来判断有没有声明DTD
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return {
        // 未声明 DTD
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}
</script>
</body>
</html>

楼梯导航

目录

楼梯导航