js实现带缓动动画的导航栏效果
话不多说，请看实例代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<styletype="text/css">
ul,li{padding:0;margin:0;}
li{list-style:none;}
#box{
height:48px;
width:900px;
background-color:#459DF5;
margin:50pxauto;
position:relative;
}
#caution{
width:150px;
height:48px;
background-color:#4B92D8;
position:absolute;
top:0;
left:0;
}
#list{
position:absolute;
}
#listli{
width:150px;
height:48px;
float:left;
color:#fff;
font:50020px/48px"微软雅黑";
text-align:center;
cursor:pointer;
}
</style>
<scripttype="text/javascript">
window.onload=function(){
//获取ulID
varoUl=document.getElementById("list");
//获取spanID
varcaution=document.getElementById("caution");
//获取ul所有孩子
varaLi=oUl.children;
//定时器管理
vartimer=null;
//缓动
varleader=0;
vartarget=0;
//停留
varcurrent=0;
for(vari=0;i<aLi.length;i++){
//鼠标移动
aLi[i].onmouseover=function(){
//关闭定时器
clearInterval(timer);
//获取当前的left值
target=this.offsetLeft;
//开启定时器
timer=setInterval(autoCaution,20);
}
//鼠标点击
aLi[i].onmousedown=function(){
//清楚所有高亮的文字
for(varj=0;j<aLi.length;j++){
aLi[j].style.color="#fff";
}
//当前点击栏变为红色
this.style.color="#ccc";
//提示框
current=this.offsetLeft;
caution.style.left=current+"px";
}
}
//鼠标离开
oUl.onmouseout=function(){
//关闭定时器
clearInterval(timer);
target=current;
timer=setInterval(autoCaution,20);
}
//缓动动画
functionautoCaution(){
leader=leader+(target-leader)/10;
caution.style.left=leader+"px";
}
}
</script>
</head>
<body>
<divid="box">
<spanid="caution"></span>
<ulid="list">
<li>首页</li>
<li>公司简介</li>
<li>企业文化</li>
<li>招贤纳士</li>
<li>企业论坛</li>
</ul>
</div>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！