【案例】百度新闻导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度新闻导航条效果实现</title>
<style>
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
#wrap{
width: 100%;
height: 40px;
margin-top: 120px;
background: #01204F;
}
#wrap nav{
width: 980px;
height: 40px;
margin: 0 auto;
position: relative;
}
#wrap ul{
position: relative;
z-index: 1;
}
#wrap ul>li{
list-style: none;
float: left;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
#wrap ul>li#active{
background: #CC0000;
}
#wrap ul>li>a{
color: #fff;
font-family: '微软雅黑';
font-weight: 700;
font-size: 14px;
display: block;
text-align: center;
}
#move{
background: #CC0000;
height: 40px;
position: absolute;
transition: left 0.3s linear;
}
</style>
</head>
<body>
<div id="wrap">
<nav>
<ul id="content">
<li id="active"><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><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><a href="#">女人</a></li>
<li><a href="#">汽车</a></li>
<li><a href="#">房产</a></li>
<li><a href="#">个人推荐</a></li>
</ul>
<div id="move"></div>
</nav>
</div>
</body>
<script>
//获取元素
var content = document.getElementById('content');
var lis = content.children;
var move = document.getElementById('move');
var active = document.getElementById('active');
console.log(move);
//设置滑块初始宽以及水平偏移值
move.style.width = active.offsetWidth + 'px';
move.style.left = active.offsetLeft + 'px';
for(var i = 0; i < lis.length; i++){
//鼠标移入事件onmouseover
lis[i].onmouseover = function(){
move.style.width = this.offsetWidth + 'px';
move.style.left = this.offsetLeft + 'px';
}
//鼠标离开时间onmouseout
lis[i].onmouseout = function(){
move.style.width = active.offsetWidth + 'px';
move.style.left = active.offsetLeft + 'px';
}
}
</script>
</html>
