我们已经掌握了动画函数的多种特效，轮播图，缓慢回到页面顶部的效果等等，这次我们要完成的是网页导航的动态效果，这次的案例不同于之前我们光标移到哪个导航块，哪个导航块就变色，而是我们的光标移动到哪个导航块，效果背景以缓慢美观的动画效果移动至光标所在导航块，并且移开光标效果背景会再次回到原先位置，当点击该导航块后，移走光标效果背景位置不会回去。
实现原理：
实现原理其实并不复杂
第一步：要构建好 HTML 结构，效果背景层使用的是单独的一个div，绝对定位到 ul 的最左侧，其次再同级添加一个 ul，这就是本次案例的基本结构
第二步：我们讨论如何实现动画效果移动，首先必不可少的移动与离开事件，这里我们仍然选择的一组事件 mouseenter 和 mouseleave，原因依旧是其不会冒泡，可以减少带来不可知的麻烦，还有一个点击事件 click，使用 for 循环为所有的 li 添加这三个事件
第三步：我们加入动画函数，还是我们的老朋友 run (obj, aim, callback)，obj是我们的效果背景，aim是光标移动到的 li 的 offsetLeft，此处即 this.offsetLeft。
但我们如何实现点击后就让效果背景移开光标后还停留在点击的导航上呢？？这里我们可以用这一种思想：我们设置一个变量 aim =0，每次离开光标回到的位置都是 aim，在我们点击后，将当前导航块的 offsetLeft 赋值给 aim，这样光标再离开，回到 aim 的效果即停留在当前位置；
代码实现：
<script>
var move=document.querySelector('.movebox');
var ul=document.querySelector('.map');
var lis=document.querySelectorAll('li');
aim=0;
for(var i=0;i<lis.length;i++){
lis[i].addEventListener('mouseenter',function(){
run(move,this.offsetLeft) //光标移动上去背景到达的位置是当前 li 的 offsetLeft
})
lis[i].addEventListener('click',function(){
aim=this.offsetLeft //将点击的 li 的offsetLeft 赋值给 aim
})
lis[i].addEventListener('mouseleave',function(){
run(move,aim) //光标离开会到的位置为 aim
})
}
function run(obj,long,callback){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
if(obj.offsetLeft==long){
window.clearInterval(obj.timer);
if(callback){
callback();
}
}else{
step=(long-obj.offsetLeft)/10
step=step>0?Math.ceil(step):Math.floor(step)
obj.style.left=obj.offsetLeft+step+'px';
}
},20)
}
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 1000px;
height: 70px;
margin: 100px auto;
background-color: rgb(161, 156, 156);
}
.map{
position: absolute;
width: 1000px;
height: 70px;
}
.map li{
width: 200px;
height: 70px;
float: left;
box-sizing: border-box;
list-style:none;
border: 1px solid black;
text-align: center;
line-height: 70px;
font-weight: bold;
font-size: 22px;
}
.movebox{
position: absolute;
left: 0;
width: 200px;
height: 70px;
/* background:url(./1.jpg) no-repeat; */
background-image: url(./1.jpg);
}
.map li:hover{
color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<div class="box">
<div class="movebox"></div>
<ul class="map">
<li>项目规划</li>
<li>项目指导</li>
<li>项目分配</li>
<li>项目开发</li>
<li>项目总结</li>
</ul>
</div>
<script>
var move=document.querySelector('.movebox');
var ul=document.querySelector('.map');
var lis=document.querySelectorAll('li');
aim=0;
for(var i=0;i<lis.length;i++){
lis[i].addEventListener('mouseenter',function(){
run(move,this.offsetLeft)
})
lis[i].addEventListener('click',function(){
aim=this.offsetLeft
})
lis[i].addEventListener('mouseleave',function(){
run(move,aim)
})
}
function run(obj,long,callback){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
if(obj.offsetLeft==long){
window.clearInterval(obj.timer);
if(callback){
callback();
}
}else{
step=(long-obj.offsetLeft)/10
step=step>0?Math.ceil(step):Math.floor(step)
obj.style.left=obj.offsetLeft+step+'px';
}
},20)
}
</script>
</body>
</html>