摘要:效果圖第天的練習(xí)是一個(gè)動(dòng)畫練習(xí),當(dāng)鼠標(biāo)移動(dòng)到錨點(diǎn)處,會(huì)有一個(gè)白色的色塊移動(dòng)到當(dāng)前錨點(diǎn)所在的位置。對所有的標(biāo)簽進(jìn)行事件監(jiān)聽,當(dāng)鼠標(biāo)移動(dòng)到錨點(diǎn)時(shí),會(huì)自動(dòng)觸發(fā)方法。
效果圖本文出自:春哥個(gè)人博客:http://www.liyuechun.org
作者:?黎躍春-追時(shí)間的人
簡介:JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視頻教程、30 個(gè)挑戰(zhàn)的起始文檔和 30 個(gè)挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西,不借助框架和庫,也不使用編譯器和引用。現(xiàn)在你看到的是這系列指南的第 22 篇。完整中文版指南及視頻教程在 從零到壹全棧部落。
第22天的練習(xí)是一個(gè)動(dòng)畫練習(xí),當(dāng)鼠標(biāo)移動(dòng)到錨點(diǎn)處,會(huì)有一個(gè)白色的色塊移動(dòng)到當(dāng)前錨點(diǎn)所在的位置。演示圖如下所示:
HTML源碼CSS源碼???Follow Along Nav Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est explicabo unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!
Aspernatur sapiente quae sint soluta modi, atque praesentium laborum pariatur earum quaerat cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.
Cum ipsam quod, incidunt sit ex tempore placeat maxime corrupti possimus veritatis ipsum fugit recusandae est doloremque? Hic, quibusdam, nulla.
Esse quibusdam, ad, ducimus cupiditate nulla, quae magni odit totam ut consequatur eveniet sunt quam provident sapiente dicta neque quod.
Aliquam dicta sequi culpa fugiat consequuntur pariatur optio ad minima, maxime odio, distinctio magni impedit tempore enim repellendus repudiandae quas!
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { min-height: 100vh; margin: 0; /* Important! */ font-family: sans-serif; background: linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%), linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%), linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%), linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%); } .wrapper { margin: 0 auto; max-width: 500px; font-size: 20px; line-height: 2; position: relative; } a { text-decoration: none; color: black; background: rgba(0, 0, 0, 0.05); border-radius: 20px } .highlight { transition: all 0.2s; border-bottom: 2px solid white; position: absolute; top: 0; background: white; left: 0; z-index: -1; border-radius: 20px; display: block; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) } .menu { padding: 0; display: flex; list-style: none; justify-content: center; margin: 100px 0; } .menu a { display: inline-block; padding: 5px; margin: 0 20px; color: black; }JS源碼 代碼解釋
通過HTML源碼我們不難發(fā)現(xiàn),所有錨點(diǎn)都是由a標(biāo)簽組成,所以在js代碼中我們首先先獲取所有的a標(biāo)簽對象,將其存儲(chǔ)到triggers變量中。
const triggers = document.querySelectorAll("a");
在效果圖中高亮狀態(tài)的小塊其實(shí)就是一個(gè)span標(biāo)簽,在JS代碼中創(chuàng)建了一個(gè)span標(biāo)簽,并且為其添加了一個(gè)highlight的class。
const highlight = document.createElement("span"); highlight.classList.add("highlight"); document.body.appendChild(highlight);
對所有的a標(biāo)簽進(jìn)行事件監(jiān)聽,當(dāng)鼠標(biāo)移動(dòng)到錨點(diǎn)時(shí),會(huì)自動(dòng)觸發(fā)highlightLink方法。
triggers.forEach(a => a.addEventListener("mouseenter", highlightLink));
getBoundingClientRect()
getBoundingClientRect
Element.getBoundingClientRect()方法返回元素的大小及其相對于視口的位置。
語法:
rectObject = object.getBoundingClientRect();
值:
返回值是一個(gè) DOMRect 對象,這個(gè)對象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即:是與該元素相關(guān)的CSS 邊框集合 。
DOMRect屬性表:
屬性 | 類型 | 描述 |
---|---|---|
bottom | float | Y 軸,相對于視口原點(diǎn)(viewport origin)矩形盒子的底部。只讀。 |
height | float | 矩形盒子的高度(等同于 bottom 減 top)。只讀。 |
left | float | X 軸,相對于視口原點(diǎn)(viewport origin)矩形盒子的左側(cè)。只讀。 |
right | float | X 軸,相對于視口原點(diǎn)(viewport origin)矩形盒子的右側(cè)。只讀。 |
top | float | Y 軸,相對于視口原點(diǎn)(viewport origin)矩形盒子的頂部。只讀。 |
width | float | 矩形盒子的寬度(等同于 right 減 left)。只讀。 |
x | float | X軸橫坐標(biāo),矩形盒子左邊相對于視口原點(diǎn)(viewport origin)的距離。只讀。 |
y | float | Y軸縱坐標(biāo),矩形盒子頂部相對于視口原點(diǎn)(viewport origin)的距離。只讀。 |
DOMRect 對象包含了一組用于描述邊框的只讀屬性——left、top、right和bottom,單位為像素。除了 width 和 height 外的屬性都是相對于視口的左上角位置而言的。
空邊框盒(譯者注:沒有內(nèi)容的邊框)會(huì)被忽略。如果所有的元素邊框都是空邊框,那么這個(gè)矩形給該元素返回的 width、height 值為0,left、top值為第一個(gè)css盒子(按內(nèi)容順序)的top-left值。
當(dāng)計(jì)算邊界矩形時(shí),會(huì)考慮視口區(qū)域(或其他可滾動(dòng)元素)內(nèi)的滾動(dòng)操作,也就是說,當(dāng)滾動(dòng)位置發(fā)生了改變,top和left屬性值就會(huì)隨之立即發(fā)生變化(因此,它們的值是相對于視口的,而不是絕對的)。如果不希望屬性值隨視口變化,那么只要給top、left屬性值加上當(dāng)前的滾動(dòng)位置(通過window.scrollX和window.scrollY),這樣就可以獲取與當(dāng)前的滾動(dòng)位置無關(guān)的常量值。
highlightLink方法
function highlightLink() { const linkCoords = this.getBoundingClientRect(); // console.log(linkCoords); const coords = { width: linkCoords.width, height: linkCoords.height, top: linkCoords.top + window.scrollY, left: linkCoords.left + window.scrollX }; highlight.style.width = `${coords.width}px`; highlight.style.height = `${coords.height}px`; highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`; }
完結(jié)!
源碼下載Github Source Code
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/91380.html
摘要:正式發(fā)布在過去的一周,正式發(fā)布,帶來大量改進(jìn)和修復(fù)。這是自開展以來的第七個(gè)主要版本,并將在年月成為下一個(gè)分支。以后,如果使用具有已知安全問題的代碼,的用戶會(huì)收到警告通知。將自動(dòng)檢查針對數(shù)據(jù)庫的安裝請求,并在代碼包含漏洞時(shí)發(fā)出警告通知。 1. Node.js 10 正式發(fā)布 在過去的一周,Node.js 10.0.0 正式發(fā)布,帶來大量改進(jìn)和修復(fù)。這是自 Node.js Foundati...
摘要:正式發(fā)布在過去的一周,正式發(fā)布,帶來大量改進(jìn)和修復(fù)。這是自開展以來的第七個(gè)主要版本,并將在年月成為下一個(gè)分支。以后,如果使用具有已知安全問題的代碼,的用戶會(huì)收到警告通知。將自動(dòng)檢查針對數(shù)據(jù)庫的安裝請求,并在代碼包含漏洞時(shí)發(fā)出警告通知。 1. Node.js 10 正式發(fā)布 在過去的一周,Node.js 10.0.0 正式發(fā)布,帶來大量改進(jìn)和修復(fù)。這是自 Node.js Foundati...
摘要:正式發(fā)布在過去的一周,正式發(fā)布,帶來大量改進(jìn)和修復(fù)。這是自開展以來的第七個(gè)主要版本,并將在年月成為下一個(gè)分支。以后,如果使用具有已知安全問題的代碼,的用戶會(huì)收到警告通知。將自動(dòng)檢查針對數(shù)據(jù)庫的安裝請求,并在代碼包含漏洞時(shí)發(fā)出警告通知。 1. Node.js 10 正式發(fā)布 在過去的一周,Node.js 10.0.0 正式發(fā)布,帶來大量改進(jìn)和修復(fù)。這是自 Node.js Foundati...
摘要:綜上,上面的代碼的值都應(yīng)該加上,即逐幀動(dòng)畫在實(shí)現(xiàn)一個(gè)卡通影片或者一個(gè)復(fù)雜的進(jìn)度指示框,或者的標(biāo)志時(shí)這種場景比較適應(yīng)逐幀動(dòng)畫。這種平滑特性不適用于逐幀動(dòng)畫的實(shí)現(xiàn)。 緩動(dòng)效果 回彈動(dòng)畫效果是比較常見的動(dòng)畫,比如小球的運(yùn)動(dòng)、對于尺寸變化和角度變化使用回彈效果可以增強(qiáng)動(dòng)畫的體驗(yàn)。小面介紹一些簡單的緩動(dòng)效果的動(dòng)畫。 彈跳動(dòng)畫的實(shí)現(xiàn) css中所有過渡和動(dòng)畫都是跟一條曲線(緩動(dòng)曲線)有關(guān)的,這條曲線...
閱讀 2273·2023-04-25 23:15
閱讀 1937·2021-11-22 09:34
閱讀 1561·2021-11-15 11:39
閱讀 968·2021-11-15 11:37
閱讀 2163·2021-10-14 09:43
閱讀 3502·2021-09-27 13:59
閱讀 1511·2019-08-30 15:43
閱讀 3475·2019-08-30 15:43