js 秒味导航菜单 滑动tab特效

CSS 样式

* {
    padding: 0; 
    margin: 0; 
    // 全局样式重置，去除默认的边距和填充
}
body {}
li {
    list-style: none; 
    // 去除列表前的小圆点
}
ul {
    width: 700px; 
    font-size: 0; 
    position: relative; 
    // 设置ul为相对定位
}
li {
    float: left;
    margin-right: 20px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    background: red;
    font-size: 20px;
    color: #000;
    text-align: center;
    // 定义列表项样式
}
.mak {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    // 遮罩层样式
}
.mak ul {
    position: absolute;
    left: 0;
    top: 0;
    width: 700px;
}
.mak ul li {
    color: #fff;
    text-align: center;
    // 遮罩层列表项样式
}

HTML 结构

<ul id="ul">
    <li class="mak">
        <ul>
            <li>首页</li>
            <li>详情页</li>
            <li>内容页</li>
        </ul>
    </li>
    <li class="box">首页</li>
    <li class="box">详情页</li>
    <li class="box">内容页</li>
</ul>

JavaScript 逻辑

// 获取相关的元素
var box = document.getElementsByClassName('box');
var mak = document.getElementsByClassName('mak')[0];
var makUl = mak.getElementsByTagName('ul')[0];
var timer2 = null, iSpeed = null, timer = null;

for (var i = 0; i < box.length; i++) {
    box[i].onmouseover = function() {
        clearTimeout(timer2);
        elasticMove(this.offsetLeft); // 当鼠标悬停时执行弹性移动函数
    };
    box[i].onmouseout = function() {
        timer2 = setTimeout(function() {
            elasticMove(0);
        }, 500);
    };
}

mak.onmouseover = function() {
    clearTimeout(timer2);
};

mak.onmouseout = function() {
    timer2 = setTimeout(function() {
        elasticMove(0);
    }, 500);
};

// 弹性移动函数
function elasticMove(iTarget) {
    clearInterval(timer);
    timer = setInterval(function() {
        iSpeed += (iTarget - mak.offsetLeft) / 6; // 速度与距离成正比，速度=(目标位置 - 当前位置) / 缩放系数
        iSpeed *= 0.75; // 弹性运动摩擦，摩擦系数
        if (Math.abs(iSpeed) < 1 && Math.abs(iTarget - mak.offsetLeft) <= 1) {
            clearInterval(timer);
            mak.style.left = iTarget + 'px';
            makUl.style.left = -iTarget + 'px'; // 产生透明错觉的效果
            iSpeed = 0;
        } else {
            mak.style.left = mak.offsetLeft + iSpeed + 'px';
            makUl.style.left = -mak.offsetLeft + 'px';
        }
    }, 30);
}