使用缓动动画函数实现导航栏效果_侧边导航栏鼠标悬停时实现动画缓缓画出效果-CSDN博客

本文链接：https://blog.csdn.net/qq_26499247/article/details/56487358

需求：
1.鼠标在那个li上面，span对应移动到该li上，移开后，回到原位置
2.鼠标点击那个li就记录该li标签，移开的时候span回到该记录的li标签上
要点：
1.封装匀速函数
2.计数器思想

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding:0;
            margin:0;
        }
        body {
            background-color: rgba(0,0,0,0.8);
        }
        div {
            width: 800px;
            height: 42px;
            background: #fff;
            margin:200px auto;
            position: relative;
        }
        ul {
            list-style: none;
            position: relative;
        }
        li{
            width: 83px;
            height: 42px;
            font:500 16px/42px "simsun";
            float: left;
            text-align: center;
            cursor: pointer;
        }
        span {
            left:0;
            top:0;
            width: 83px;
            height: 42px;
            position: absolute;
            border-bottom: 3px solid red;
        }
    </style>
</head>
<body>
    <div>
        <span></span>
        <ul>
            <li>测试文字1</li>
            <li>测试文字2</li>
            <li>测试文字3</li>
            <li>测试文字4</li>
            <li>测试文字5</li>
            <li>测试文字6</li>
            <li>测试文字7</li>
        </ul>
    </div>
</body>
<script>
    var span = document.getElementsByTagName("span")[0];
    var liArr = document.getElementsByTagName("li");
    var liWidth = liArr[0].offsetWidth;
    var count = 0 ;
    for(var i=0;i<liArr.length;i++){
        liArr[i].index = i ;
        liArr[i].onmouseover = function(){
            animate(span,this.index * liWidth);
            console.log(1);
        };
        liArr[i].onmouseout = function(){
            animate(span,count * liWidth);
        }
        liArr[i].onclick = function(){
            count = this.index ;
            animate(span,count * liWidth);
        }
    }
    function animate(ele,target){
        clearInterval(ele.timer);
        ele.timer = setInterval(function(){
            var step = (target - ele.offsetLeft)/10;
            step = step > 0 ? Math.ceil(step):Math.floor(step);
            ele.style.left = ele.offsetLeft + step + "px";
            if(Math.abs(target-ele.offsetLeft) <= Math.abs(step)){
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        },10)
    }
</script>
</html>