前端ABC网页上的导航栏随处可见，我们可以给导航栏加上很多特效。下面是我经常用的一种效果，滑动的导航栏菜单。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端ABC-滑动的导航栏菜单</title>
<style type="text/css">
html,body,ul,li {
padding: 0;
margin: 0;
font-size: 14px;
}
#nav {
position: relative;
width: 500px;
height: 30px;
list-style-type: none;
background-color: #6fa8dc;
}
#nav li {
float: left;
width: 100px;
height: 28px;
line-height: 28px;
text-align: center;
cursor: pointer;
z-index: 2;
}
ul#nav li a {
text-decoration: none;
color: #111;
font-family: "Microsoft YaHei";
}
#nav li.bg {
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 5px;
background-color: #073763;
z-index: 1;
overflow: hidden;
}
</style>
</head>
<body>
<ul id="nav">
<li>
<a href="#">首 页</a>
</li>
<li>
<a href="#">联系方式</a>
</li>
<li>
<a href="#">产品展示</a>
</li>
<li>
<a href="#">成员介绍</a>
</li>
<li>
<a href="#">发展前景</a>
</li>
<li></li>
</ul>
<script type="text/javascript">
window.onload = function(){
var oNav = document.getElementById('nav'),
oLi = oNav.getElementsByTagName('li'),
oBg = oNav.getElementsByClassName('bg'),
oBg = oLi[oLi.length - 1],
i = 0;
for(i = 0; i < oLi.length - 1; i++){
oLi[i].onmouseover = function(){
startMove(oBg,this.offsetLeft);
};
oLi[i].onmouseout = function(){
startMove(oBg,0);
};
}
}
var iSpeed = 0;
var left = 0;
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
iSpeed += (iTarget-obj.offsetLeft)/6;
iSpeed *= 0.4;
left += iSpeed;
if(Math.abs(iSpeed) < 1 && Math.abs(left - iTarget) < 1){
clearInterval(obj.timer);
obj.style.left = iTarget + 'px';
} else {
obj.style.left = left + 'px';
}
},30)
}
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » Js实现滑动的导航栏菜单
