iT邦幫忙

2021 iThome 鐵人賽

DAY 28
1
Modern Web

前端藏寶圖系列 第 28

來做一個跟屁蟲鎂光燈

標題聽起來很厲害(?),不過今天只需要認識一個 Web API - Element.getBoundingClientRect()

getBoundingClientRect

此元素方法會回傳一個DOMRect物件,物件中會包含選取元素的尺寸和坐標資訊,除了元素的高度和寬度以外,其他的屬性都會依據元素當下相對 viewport 的左上角計算距離

換句話說,當上下滾動頁面時,y / top的距離會變動,左右滾動頁面時,x / left的距離會變動
可以用codepen連結觀察看看

在有滾動頁面的情況下,要取得特定元素相對於文件(Document)左上角的位置時就需要加上滾動的距離,計算公式如下:

元素相對於文件的水平距離: x / left + window.scollX
元素相對於文件的垂直距離: y / top + window.scrollY


圖片來源:MDN

  • width: 選取元素的寬度
  • height: 選取元素的高度
  • x / left: 元素左上角相對視窗的水平距離
  • right: 元素右下角相對視窗的距離
  • y / top: 元素左上角相對視窗的垂直距離

實作練習

註:以下練習來自於 JavaScript 30

原理及步驟:

  1. 建立一個跟著游標走的鎂光燈元素<span>並加入到頁面中
const spotlight = document.createElement('span');
document.body.append(spotlight);
spotlight.classList.add('spotlight');
    • 鎂光燈元素必須依照點選的連結大小(寬度&高度)變換
    • 當頁面捲動時,需要校正鎂光燈元素位置
    • 當滑鼠進入連結位置,替鎂光燈設置一樣的座標
function highlightLink() {
  const linkInfo = this.getBoundingClientRect();
  
  // 位置校正
  const coordinate = {
    width: linkInfo.width,
    height: linkInfo.height,
    left: linkInfo.left + scrollX,
    top: linkInfo.top + scrollY,
  }
  
  spotlight.style.width = `${coordinate.width}px`;
  spotlight.style.height = `${coordinate.height}px`;
  spotlight.style.transform = `translate(${coordinate.left}px, ${coordinate.top}px)`;
}
  1. 將所有連結綁上事件監聽器,並在滑鼠進入元素時觸發
const links = document.querySelectorAll('a');

links.forEach(link => {
  link.addEventListener('mouseenter', highlightLink);
})

codepen連結

/images/emoticon/emoticon29.gif

參考資料:

MDN
JavaScript30


上一篇
色碼轉換器再進化
下一篇
來畫一個視力檢查表吧!
系列文
前端藏寶圖30

2 則留言

0
Hooo
iT邦新手 5 級 ‧ 2021-10-13 22:05:07

跟屁股鎂光燈
取名好可愛XDDD

Chiahsuan iT邦新手 5 級 ‧ 2021-10-13 22:19:08 檢舉

跟屁股感覺點閱率可以更高XDDD

/images/emoticon/emoticon37.gif

0
juck30808
iT邦新手 3 級 ‧ 2021-10-14 12:33:08

恭喜即將邁入完賽階段~

Chiahsuan iT邦新手 5 級 ‧ 2021-10-14 20:12:35 檢舉

/images/emoticon/emoticon58.gif
謝謝~~

我要留言

立即登入留言