成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Day22 - 鼠標(biāo)錨點(diǎn)動(dòng)畫生成指南

binta / 880人閱讀

摘要:效果圖第天的練習(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源碼




    
    ???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!

CSS源碼
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è)highlightclass。

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

相關(guān)文章

  • FCC 成都社區(qū)·前端周刊 第 10 期

    摘要:正式發(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...

    BigNerdCoding 評論0 收藏0
  • FCC 成都社區(qū)·前端周刊 第 10 期

    摘要:正式發(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...

    li21 評論0 收藏0
  • FCC 成都社區(qū)·前端周刊 第 10 期

    摘要:正式發(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...

    zhangqh 評論0 收藏0
  • css過度與動(dòng)畫

    摘要:綜上,上面的代碼的值都應(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)的,這條曲線...

    Kross 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<