<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 百度运动导航栏-JavaScript </title>
<style type="text/css">
* {
margin: 0;
padding: 0;
color: #FFFFFF;
font-weight: 900;
}
#box {
width: 1088px;
background: blue;
position: relative;
margin: 100px auto 0;
}
#list {
position: relative;
}
#list:after {
height: 0;
clear: both;
content: ".";
display: block;
visibility: hidden;
}
#list li {
float: left;
cursor: pointer;
list-style: none;
margin-right: 1px;
padding: 12px 20px;
position: relative;
z-index: 2;
}
#shade {
top: 0;
left: 0;
width: 0;
height: 100%;
position: absolute;
background: orangered;
}
</style>
</head>
<body>
<div id="box">
<ul id="list">
<li class="active">首页</li>
<li>关于我们</li>
<li>新闻</li>
<li>列表</li>
<li>视频</li>
<li>传媒</li>
<li>互联网</li>
<li>个性推荐</li>
<li>体育</li>
<li>房地产</li>
<li>娱乐</li>
<li>财经</li>
<li>联系我们</li>
<div id="shade"></div>
</ul>
</div>
<script>
var oBox = document.getElementById("box");
var oList = document.getElementById("list");
var oShade = document.getElementById("shade");
var oLi = oList.getElementsByTagName("li");
var timer = null;
var num = 0;
var shadeWidth = oLi[0].offsetWidth + 'px';
oShade.style.width = shadeWidth;
for (var i = 0 ; i < oLi.length ; i++) {
oLi[i].index = i;
oLi[i].onmouseover = function(){
oShade.style.width = oLi[this.index].offsetWidth + 'px';
startMove( this.offsetLeft );
}
oLi[i].onmouseout = function(){
startMove(num);
oShade.style.width = shadeWidth;
};
oLi[i].onclick = function(){
num = this.offsetLeft;
}
};
var timer = null;
function startMove(target){
clearInterval(timer);
timer = setInterval(function(){
var speed = (target-oShade.offsetLeft)/10;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if (target == oShade.offsetLeft) {
clearInterval(timer);
}else{
oShade.style.left = oShade.offsetLeft + speed + "px";
};
},30);
};
</script>
</body>
</html>
网友评论