<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹性运动---弹性菜单</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
ul {
width: 400px;
height: 30px;
position: relative;
margin: 100px auto 0;
}
li {
float: left;
width: 98px;
height: 28px;
line-height: 28px;
border: 1px solid #ccc;
text-align: center;
z-index: 2;
position: relative;
cursor: pointer;
}
.bg {
width: 100px;
height: 5px;
overflow: hidden;
background: red;
border: none;
position: absolute;
top: 24px;
left: 0;
z-index: 1;
}
</style>
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var oBg=aLi[aLi.length-1];
var i=0;
for(i=0;i<aLi.length-1;i++)
{
aLi[i].index=i;
aLi[i].onmouseover=function ()
{ // 移动的元素 当前对象 移动的属性
startMove(oBg,this,'left');
};
}
};
// 移动的元素 当前对象 移动的属性
function startMove(obj, index, attr)
{
iTarget=get_offset_val(index, attr);
obj.attr_name=get_offset_val(obj, attr);
if(iTarget==obj.attr_name)
return; // 如果选择的是当前的选中的元素
obj.iSpeed=0;
var iSpeed_dis=5;// 速度比值
var mc =0.7 ; // 摩擦大小 值越大元素停止运动时间越长 值越小元素停止运动的时间越快
// 防止开启多次定时器
clearInterval(obj.timer);
obj.timer=setInterval(backOut, 30);
// 弹性运动
function backOut()
{
// 加、减速运动 iTarget>obj.offsetLeft加速运动 iTarget<obj.offsetLeft减速运动
obj.iSpeed+=(iTarget-obj.attr_name)/iSpeed_dis;
// 摩擦运动 让元素停止运动
obj.iSpeed*=mc;
obj.attr_name+=obj.iSpeed; // 防止小数误差 ispeed 不是整数 ，把小数保留下来
//运动速度小1 并且目标点与元素距离小于1 停止运动
if(Math.abs(obj.iSpeed)<=1 && Math.abs(obj.attr_name-iTarget)<=1)
{
obj.style[attr]=iTarget+'px';
clearInterval(obj.timer);
}
else
{
obj.style[attr]= obj.attr_name+'px';
}
} //------------------ backOut() 结束
}
// 获取 offset 值
function get_offset_val(obj,attr)
{
switch(attr)
{
case 'left':
return obj.offsetLeft;
break;
case 'top':
return obj.offsetTop;
break;
case 'width':
return obj.offsetWidth;
break;
case 'height':
return obj.offsetHeight;
break;
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>首页</li>
<li>关于我们</li>
<li>产品</li>
<li>联系方式</li>
<li class="bg"></li>
</ul>
</body>
</html>