原生js实现弹性菜单功能

弹性菜单，主要运用到的是弹性运动。只要知道了弹性运动是怎样实现的，弹性菜单就很好实现了，下面我首先总结一下，我是怎样一步一步实现弹性运动的，然后再写弹性菜单的代码。

弹性运动用到的知识：js基础、dom、定时器

弹性运动实现步骤：

• 声明和获取要运用到的变量
• 清空定时器
• 开启定时器，在定时器内求出速度：速度 +=（目标点 - 当前值）/系数（系数一般取6、7、8），因为需要最终让运动停止，所以还要有摩擦力。所以还有：速度 *=摩擦系数（一般可取0.7、0.75）
• 判断如果目标值减去当前值的绝对值小与1并且速度小与1的时候，清空定时器，并且让速度为0，让运动对象的当前值等于目标值。否则，让运动对象的left的值等于当前值+速度+‘px’。

知道了弹性运动的实现步骤，现在我们直接上代码

HTML代码

<ul id="ul1">
    <li id="mark">
        <ul>
            <li>首页</li>
            <li>论坛</li>
            <li>视频</li>
            <li>留言</li>
        </ul>
    </li>
    <li class="box">首页</li>
    <li class="box">论坛</li>
    <li class="box">视频</li>
    <li class="box">留言</li>
</ul>

CSS代码

    <style>
        *{ margin:0; padding:0;}
        #ul1{ width:428px; height:30px; margin:20px auto; position:relative;}
        #ul1 li{ width:100px; height:30px; background:red; border:1px #000 solid; margin-right:5px; float:left; list-style:none; line-height:30px; text-align:center;}
        #ul1 #mark{ position:absolute; left:0; top:0; overflow:hidden;}
        #ul1 #mark ul{ width:428px; position:absolute; left:-1px; top:-1px; color:white;}
    </style>

JS代码

<script>
    var oMark = document.getElementById('mark');
    var aBox = document.querySelectorAll('.box');
    var ChildUl = oMark.getElementsByTagName('ul')[0];
    var iTimer = null;
    var timer = null;
    var iSpeed = 0;
    for(var i=0; i<aBox.length; i++){
        aBox[i].onmouseover = function(){
            clearTimeout(timer);
            startMove(this.offsetLeft);
        }
        aBox[i].onmouseout = function(){
            timer = setTimeout(function(){//当鼠标移出时延迟让mark回到首页，防止如果鼠标一直停在此处，而遮罩挡住了下面的li，浏览器以为已经移出了下面的li，而出现不断闪烁的现象。而在这里添加延迟时间，在延迟时间内我们就可以做很多事
                startMove(0);
            },100);
        }
    }
    oMark.onmouseover = function(){
        clearTimeout(timer);//清空定时器，则不让其运动到首页上面，就解决了一直闪烁的现象
    }
    oMark.onmouseout = function(){
        timer = setTimeout(function(){startMove(0);},100);//移出的时候，再次开启定时器，让其回到首页上面
    }
    function startMove(iTarget){
        clearInterval(iTimer);
        iTimer = setInterval(function(){
            iSpeed +=(iTarget - oMark.offsetLeft)/6;//求出速度
            iSpeed *=0.75;//速度损失
            if(Math.abs(iSpeed)<1&&Math.abs(iTarget - oMark.offsetLeft)<1){
                clearInterval(iTimer);
                    iSpeed = 0;
                oMark.style.left = iTarget + 'px';
                ChildUl.style.left = -iTarget + 'px';//让li下面的ul向与目标值相反的方向移动，移动的距离与目标距离相等
            }else{
                oMark.style.left = oMark.offsetLeft + iSpeed + 'px';
                ChildUl.style.left = -oMark.offsetLeft + 'px';
            }
        },30);

    }
</script>

上面就是我的总结，有兴趣的可以看看，有疑问或异议也欢迎提出，大家一起探讨