JavaScript实现弹性导航效果

本文实例为大家分享了javascript实现弹性导航效果的具体代码，供大家参考，具体内容如下

主要利用offsetx

1.先搭架子：

* {
      margin: 0;
      padding: 0;
        }
        
        .nav {
            width: 900px;
            height: 63px;
            background: url(images/doubleone.png) no-repeat right center;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
        
        ul {
            position: relative;
            z-index: 999;
        }
        
        ul>li {
            list-style: none;
            float: left;
            width: 88px;
            height: 63px;
            line-height: 63px;
            text-align: center;
        }
        
        span {
            display: inline-block;
            width: 88px;
            height: 63px;
            background: url("images/tmall.png") no-repeat;
            position: absolute;
            left: 0;
            top: 0;
}

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

2.编写逻辑部分

//1.拿到需要操作的元素
const oitems = document.queryselectorall("li");
 let ospan = document.queryselector("span");
 
//2.监听每个菜单的点击事件
for (let i = 0; i < oitems.length; i++) {
            let item = oitems[i];
            item.onclick = function() {
                //offsetleft 得到被点击的元素距离第一个定位祖先元素的偏移位
                // console.log(this.offsetleft);
                // ospan.style.left = this.offsetleft + 'px';
                //调用函数
                easeanimation(ospan, {
                    "left": this.offsetleft
                });
            };
        }

animation.js

(function() {
    /**
     * 匀速动画
     * @param {*} ele 执行动画元素
     * @param {*} obj 该元素的哪些属性需要执行动画
     * @param {*} fn  动画执行完成后可能还需要执行的操作
     * 
     * 调用方式参考
     * linearanimation(odiv, {
                "margintop": 500,
                "marginleft": 300
        });
     */
    function linearanimation(ele, obj, fn) {
        clearinterval(ele.timerid);
        ele.timerid = setinterval(function() {
            // flag变量用于标记是否所有的属性都执行完了动画
            let flag = true;
 
            for (let key in obj) {
                let target = obj[key];
 
                // 1.拿到元素当前的位置
                // let begin = parseint(ele.style.width) || 0;
                let style = getcomputedstyle(ele);
                // let begin = parseint(style.width) || 0;
                let begin = parsefloat(style[key]) || 0;
 
                // 2.定义变量记录步长
                let step = (begin - target) > 0 ? -13 : 13;
 
                // 3.计算新的位置
                begin += step;
                // console.log(math.abs(target - begin), math.abs(step));
                if (math.abs(target - begin) > math.abs(step)) { //未执行完动画
                    flag = false;
                } else { //执行完动画
                    begin = target;
                }
 
                // 4.重新设置元素的位置
                // ele.style.width = begin + "px";
                ele.style[key] = begin + "px";
            }
 
            //判断动画是否执行完
            if (flag) {
                //动画执行完后关闭定时器
                clearinterval(ele.timerid);
 
                //判断是否传入fn函数，有才执行反之不执行
                // if(fn){
                //     fn();
                // }
                fn && fn();
            }
        }, 100);
    }
 
    //缓动动画
    function easeanimation(ele, obj, fn) {
        clearinterval(ele.timerid);
        ele.timerid = setinterval(function() {
            // flag变量用于标记是否所有的属性都执行完了动画
            let flag = true;
 
            for (let key in obj) {
                let target = obj[key];
 
                // 1.拿到元素当前的位置
                let style = getcomputedstyle(ele);
                let begin = parseint(style[key]) || 0;
 
                // 2.定义变量记录步长
                // 公式: (结束位置 - 开始位置) * 缓动系数(0 ~1)
                let step = (target - begin) * 0.3;
 
                // 3.计算新的位置
                begin += step;
                if (math.abs(math.floor(step)) > 1) {
                    flag = false;
                } else {
                    begin = target;
                }
                // 4.重新设置元素的位置
                ele.style[key] = begin + "px";
            }
 
            //判断动画是否执行完
            if (flag) {
                //动画执行完后关闭定时器
                clearinterval(ele.timerid);
 
                //判断是否传入fn函数，有才执行反之不执行
                fn && fn();
            }
        }, 100);
    }
 
    // 将函数绑定到window对象上, 这样全局就可以使用了
    window.linearanimation = linearanimation;
    window.easeanimation = easeanimation;
})();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。