鼠标事件，天猫弹性导航

最新推荐文章于 2022-08-22 22:52:29 发布

zh__quan

最新推荐文章于 2022-08-22 22:52:29 发布

阅读量98

点赞数

本文链接：https://blog.csdn.net/zh__quan/article/details/97623990

版权

onmouseover 鼠标进入

onmousemove 鼠标移动

onmousedown 鼠标点击

onmouseout 鼠标离开

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        body {
            background: pink;
        }
        
        #nav {
            width: 900px;
            height: 63px;
            background: url("./images/doubleOne.png") no-repeat;
            background-color: #fff;
            background-position: center right;
            position: relative;
            margin: 100px auto;
        }
        
        #nav ul {
            position: relative;
        }
        
        #nav ul>li {
            width: 88px;
            height: 63px;
            line-height: 70px;
            float: left;
            text-align: center;
            cursor: pointer;
        }
        
        #t_mall {
            width: 88px;
            height: 63px;
            background: url("./images/tMall.png") no-repeat;
            position: absolute;
        }
    </style>
</head>

<body>
    <nav id="nav">
        <span id="t_mall"></span>
        <ul>
            <li>双11狂欢</li>
            <li>服装会场</li>
            <li>数码家电</li>
            <li>家具建材</li>
            <li>母婴童装</li>
            <li>手机会场</li>
            <li>美妆会场</li>
            <li>进口会场</li>
            <li>飞猪旅行</li>
        </ul>
    </nav>

    <script>
        var nav = document.getElementById("nav");
        var tMall = nav.children[0];
        var ul = nav.children[1];
        var liLis = ul.children;

        var beginX = 0;

        for (var i = 0; i < liLis.length; i++) {
            var li = liLis[i];
            li.onmouseover = function() {
                // console.log('进入')
                end = this.offsetLeft
            };
            li.onmousedown = function() {
                // console.log('点击')
                beginX = this.offsetLeft
            };
            li.onmouseout = function() {
                // console.log('离开')
                end = beginX
            }
        }

        // 缓动动画
        var begin = 0,
            end = 0;
        setInterval(() => {
            begin = begin + (end - begin) * 0.1;
            tMall.style.left = begin + 'px';
        }, 10);
    </script>
</body>

</html>