经典导航栏的制作
描述：导航的形状为圆角矩形，用户正在浏览的栏目的名称底色与其他不同，党用户鼠标移到其他栏目的目录的时候，底色有正在浏览的栏目缓慢移动到鼠标经过的栏目上，当鼠标移开的时候，底色又会缓慢移动到当前浏览的栏目名称下面。当用户点击某一栏目的时候，底色缓慢移动到该栏目，并固定。需要的图片自己下载哦。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: rgba(0, 0, 0, 0.8);
}
.box {
width: 800px;
height: 42px;
background: #fff url("images/wifi.png") right center no-repeat;
margin: 200px auto;
border-radius: 8px;
position: relative;
}
ul {
list-style: none;
position: relative;
}
li {
float: left;
width: 83px;
height: 42px;
text-align: center;
font: 500 16px/42px "simsun";
cursor: pointer;
}
span {
position: absolute;
left: 0;
top: 0;
width: 83px;
height: 42px;
background: url("images/cloud.gif") no-repeat;
}
</style>
<script>
/**
* 当页面加载结束后执行
*/
window.onload=function () {
//获取相关元素
var liArr = document.getElementsByTagName("li");
var liWidth = liArr[0].offsetWidth;
var span = document.getElementsByTagName("span")[0];
//设置计数器
var count = 0;
//绑定事件
for (var i=0;i<liArr.length;i++){
liArr[i].index=i;//设置索引
//鼠标经过时候的事件
liArr[i].onmouseover = function () {
animate(span,this.index*liWidth);
}
//鼠标移开时候的事件
liArr[i].onmouseout = function () {
animate(span,count*liWidth);
}
//鼠标点击时候的事件
liArr[i].onclick = function () {
count = this.index;
animate(span,count*liWidth);
}
}
//封装的缓慢移动函数
function animate(ele,target) {
clearInterval(ele.timer);
ele.timer=setInterval(function () {
var step = (target-ele.offsetLeft)/10;
step = step>0?Math.ceil(step):Math.floor(step);
ele.style.left=ele.offsetLeft+step+"px";
if(Math.abs(target-ele.offsetLeft)<Math.abs(step)){
ele.style.left=target+"px";
clearInterval(ele.timer);
}
},18);
}
}
</script>
</head>
<body>
<div class="box">
<span></span>
<ul>
<li>首页信息</li>
<li>编程语言</li>
<li>web前段</li>
<li>thinkPHP</li>
<li>javascript</li>
<li>java</li>
<li>Python</li>
<li>留言板</li>
</ul>
</div>
</body>
</html>
