网页导航的动画效果
? ? ? ? 我們已經掌握了動畫函數的多種特效，輪播圖，緩慢回到頁面頂部的效果等等，這次我們要完成的是網頁導航的動態效果，這次的案例不同于之前我們光標移到哪個導航塊，哪個導航塊就變色，而是我們的光標移動到哪個導航塊，效果背景以緩慢美觀的動畫效果移動至光標所在導航塊，并且移開光標效果背景會再次回到原先位置，當點擊該導航塊后，移走光標效果背景位置不會回去。
?實現原理：
實現原理其實并不復雜
第一步：要構建好 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)/10step=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)/10step=step>0?Math.ceil(step):Math.floor(step)obj.style.left=obj.offsetLeft+step+'px';}},20)}</script>
</body>
</html>
總結
- 上一篇： 《史记》阅读进度
- 下一篇： 部署exchange提示“由于父类不在可