弹性菜单，主要运用到的是弹性运动。只要知道了弹性运动是怎样实现的，弹性菜单就很好实现了，下面我首先总结一下，我是怎样一步一步实现弹性运动的，然后再写弹性菜单的代码。
弹性运动实现步骤：
- 声明和获取要运用到的变量
- 清空定时器
- 开启定时器，在定时器内求出速度：速度 +=（目标点 - 当前值）/系数（系数一般取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>
