滑动遮盖导航栏

最新推荐文章于 2024-03-29 08:47:36 发布

不道归来`

最新推荐文章于 2024-03-29 08:47:36 发布

阅读量108

点赞数 1

文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_46342447/article/details/122104013

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            display: flex;
            position: relative;
            margin: 0;
        }

        li {
            padding: 5px 15px;
            background-color: cornsilk;
        }

        div {
            width: 400px;
            height: 400px;
            background-color: chocolate;
            position: absolute;
            display: none;
        }

        ul>div {
            position: absolute;
            width: 60px;
            height: 30px;
            background-color: burlywood;
            opacity: 0.5;
            left: 0px;
            transition: all 0.5s;
            pointer-events: none;
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <div></div>
        <li>首页</li>
        <li>男装</li>
        <li>女装</li>
        <li>箱包</li>
        <li>皮鞋</li>
    </ul>
    <div class="div1">首页..</div>
    <div class="div1">男装..</div>
    <div class="div1">女装..</div>
    <div class="div1">箱包..</div>
    <div class="div1">皮鞋..</div>


    <script>
        var ul, div, diva, prev;
        init()
        function init() {
            ul = document.querySelector("ul");
            diva = document.querySelectorAll(".div1");
            div = document.querySelector("ul>div");
            ul.addEventListener("mouseover", overHandler);
            move1(ul.children[1]);
        }
        function overHandler(e) {
            if (e.target.nodeName !== "LI") return;
            move1(e.target);
        }
        function move1(li) {
            div.style.left = li.offsetLeft + "px";
            var index = Array.from(ul.children).slice(1).indexOf(li);
            if (prev) {
                prev.style.display = "none";
            }
            prev = diva[index];
            prev.style.display = "block";
        }
    </script>
</body>

</html>