js进阶之天猫弹性导航

最新推荐文章于 2019-07-22 20:44:03 发布

頑張ってちしじょ

最新推荐文章于 2019-07-22 20:44:03 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/weixin_45170547/article/details/91521974

版权

主要是对offset家族进行巩固
思路：

获取所需要的标签
遍历
监听鼠标进入的事件
监听鼠标点击的事件
监听鼠标离开的事件
缓动动画（公式：开始值 = 开始值+（结束值-开始值）*缓动系数
代码如下

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            background-color: pink;
        }
        #nav{
            width:920px;
            height:70px;
            margin:100px auto;
            background: url("img/doubleOne.png") no-repeat right center #fff;
            border-radius: 5px;
            position: relative;
        }
        #nav ul{           
            position: relative;
        }
        #nav ul li{
            width:88px;
            height:70px;
            text-align: center;
            line-height: 70px;
            float:left;
            position: relative;
            cursor: pointer;
        }
        #t_mall{
            position: absolute;
            width:88px;
            height:70px;
            background: url("img/tMall.png") no-repeat;
        }
    </style>
</head>
<body>
    <div 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>
    </div>
    <script>
        window.onload = function (){
            //1.获取需要的标签
            var nav = document.getElementById("nav");
            var t_mall = nav.children[0];
            var ul = nav.children[1];
            var allLis = ul.children;

            //记录鼠标获取的位置
            var beginX = 0;
            //2.遍历
            for(var i = 0; i < allLis.length; i++){
                var li = allLis[i];
                //2.1监听进入事件
                li.onmouseover = function (){
                    var offsetLeft = this.offsetLeft;
                    end = offsetLeft;
                }
                //2.2监听事件按下
                li.onmousedown = function (){
                    beginX = this.offsetLeft;
                }
                //2.3监听事件离开
                li.onmouseout = function (){
                    end = beginX;
                }
            }
            //缓慢动画
            var begin = 0, end = 0;
            setInterval(function() {
                //公式：起始值 = 起始值 +（结束值 - 起始值）*缓动系数
                begin = begin +(end-begin) * 0.1;
                t_mall.style.left = begin + 'px';
            }, 10);
            
        }
    </script>

其中需要注意的事情就是：