iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 26
1
Modern Web

實作經典 JavaScript 30系列 第 26

Day26: Follow Along Links

WES BOS系列影片
Alex快速導讀系列影片

今天的練習是用js控制滑鼠游標,
當滑鼠游標到達當前的連結時,
我們使用一個新的方法
getBoundingClientRect()
得到當前連結區塊的長寬,並使highlight樣式
跟隨連結的長寬做動態變化

1.先抓取頁面上所有的a連結。
因為是練習,所以抓取的方式就很簡單,
直接抓全部標籤a的元素,但在正式專案還是需要注意抓取的方式
還是只抓取需要更動的部分就好,不要造成同事的困擾喔

const triggers = document.querySelectorAll('a')

2.用js創造一個span元素,待會控制它的長寬與位置即可

const highlight = document.createElement('span')
highlight.classList.add('highlight')
document.body.appendChild(highlight)

3.對所有a元素做,mouseenter的監聽

triggers.forEach(a => {
  a.addEventListener('mouseenter', highlightLink)
})

4.製作 highlightLink 函式

function highlightLink () {
  const linkCoords = this.getBoundingClientRect()
  console.log(linkCoords);
}

現在可以得到各a元素的座標與長寬
先設定長寬

function highlightLink () {
  const linkCoords = this.getBoundingClientRect();
  console.log(linkCoords);
  const coords = {
  width: linkCoords.width,
  height: linkCoords.height,
  };   
  highlight.style.width = `${coords.width}px`
  highlight.style.height = `${coords.height}px`
}

可以看到樣式的長寬正在變化,但位置依舊都留在左上角,
所以現在來調整位置

function highlightLink () {
  const linkCoords = this.getBoundingClientRect();
  console.log(linkCoords);
  const coords = {
    width: linkCoords.width,
    height: linkCoords.height,
    top:linkCoords.top,
    left:linkCoords.left,
  };   
  highlight.style.width = `${coords.width}px`
  highlight.style.height = `${coords.height}px`
  highlight.style.top = `${coords.top}px`
  highlight.style.left = `${coords.left}px`
}

但如果視窗捲軸往下呢?位置就跑掉了

5.加上捲軸的移動

function highlightLink () {
...
  const coords = {
    width: linkCoords.width,
    height: linkCoords.height,
    top:linkCoords.top + window.scrollY,
    left:linkCoords.left + window.scrollX,
  };   
...
}


今天的練習完成囉,完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30


上一篇
Day25: Adding Up Times With Reduce
下一篇
Day27:Speech Synthesis
系列文
實作經典 JavaScript 3030

尚未有邦友留言

立即登入留言