We have mastered a variety of special effects of animation functions, carousel images, the effect of slowly returning to the top of the page, etc. This time we want to complete the dynamic effect of web page navigation. This case is different from where we moved the cursor before. Navigation block, whichever navigation block changes color, but which navigation block our cursor moves to, the effect background moves to the navigation block where the cursor is located with a slow and beautiful animation effect, and when the cursor is removed, the effect background will return to the original position again. After the navigation block, moving the cursor effect background position will not go back.
Implementation principle:
The implementation principle is actually not complicated
The first step : to build a good HTML structure, the effect background layer uses a separate div, absolutely positioned to the far left of the ul, and then add a ul at the same level, which is the basic structure of this case
Step 2 : We discuss how to achieve animation effect movement. First of all, the essential move and leave events. Here we still choose a set of events mouseenter and mouseleave . The reason is still that they will not bubble, which can reduce the unknowable Trouble, there is also a click event click, use a for loop to add these three events for all li
The third step : we add the animation function, or our old friend run (obj, aim, callback) , obj is our effect background, aim is the offsetLeft of the li the cursor moves to, here is this.offsetLeft.
But how do we make the effect background move away from the cursor and stay on the clicked navigation after clicking? ? Here we can use this idea: we set a variable aim = 0, and the position returned by the cursor is aim every time we leave the cursor. After we click, assign the offsetLeft of the current navigation block to aim, so that the cursor leaves again and returns to The effect to aim is to stay at the current position;
Code:
<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>
Full code:
<!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>