网页导航的动画效果
? ? ? ? 我們已經(jīng)掌握了動(dòng)畫函數(shù)的多種特效，輪播圖，緩慢回到頁(yè)面頂部的效果等等，這次我們要完成的是網(wǎng)頁(yè)導(dǎo)航的動(dòng)態(tài)效果，這次的案例不同于之前我們光標(biāo)移到哪個(gè)導(dǎo)航塊，哪個(gè)導(dǎo)航塊就變色，而是我們的光標(biāo)移動(dòng)到哪個(gè)導(dǎo)航塊，效果背景以緩慢美觀的動(dòng)畫效果移動(dòng)至光標(biāo)所在導(dǎo)航塊，并且移開光標(biāo)效果背景會(huì)再次回到原先位置，當(dāng)點(diǎn)擊該導(dǎo)航塊后，移走光標(biāo)效果背景位置不會(huì)回去。
?實(shí)現(xiàn)原理：
實(shí)現(xiàn)原理其實(shí)并不復(fù)雜
第一步：要構(gòu)建好 HTML 結(jié)構(gòu)，效果背景層使用的是單獨(dú)的一個(gè)div，絕對(duì)定位到 ul 的最左側(cè)，其次再同級(jí)添加一個(gè) ul，這就是本次案例的基本結(jié)構(gòu)
第二步：我們討論如何實(shí)現(xiàn)動(dòng)畫效果移動(dòng)，首先必不可少的移動(dòng)與離開事件，這里我們?nèi)匀贿x擇的一組事件 mouseenter 和 mouseleave，原因依舊是其不會(huì)冒泡，可以減少帶來(lái)不可知的麻煩，還有一個(gè)點(diǎn)擊事件 click，使用 for 循環(huán)為所有的 li 添加這三個(gè)事件
第三步：我們加入動(dòng)畫函數(shù)，還是我們的老朋友 run (obj, aim, callback)，obj是我們的效果背景，aim是光標(biāo)移動(dòng)到的 li 的 offsetLeft，此處即 this.offsetLeft。
但我們?nèi)绾螌?shí)現(xiàn)點(diǎn)擊后就讓效果背景移開光標(biāo)后還停留在點(diǎn)擊的導(dǎo)航上呢？？這里我們可以用這一種思想：我們?cè)O(shè)置一個(gè)變量 aim =0，每次離開光標(biāo)回到的位置都是 aim，在我們點(diǎn)擊后，將當(dāng)前導(dǎo)航塊的 offsetLeft 賦值給 aim，這樣光標(biāo)再離開，回到 aim 的效果即停留在當(dāng)前位置；
代碼實(shí)現(xiàn)：
<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) //光標(biāo)移動(dòng)上去背景到達(dá)的位置是當(dāng)前 li 的 offsetLeft})lis[i].addEventListener('click',function(){aim=this.offsetLeft //將點(diǎn)擊的 li 的offsetLeft 賦值給 aim})lis[i].addEventListener('mouseleave',function(){run(move,aim) //光標(biāo)離開會(huì)到的位置為 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>項(xiàng)目規(guī)劃</li><li>項(xiàng)目指導(dǎo)</li><li>項(xiàng)目分配</li><li>項(xiàng)目開發(fā)</li><li>項(xiàng)目總結(jié)</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>
總結(jié)
- 上一篇： 《史记》阅读进度
- 下一篇： 部署exchange提示“由于父类不在可