iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 22
0

Day22-課題內容

在今天的課題當中,我們要透過滑鼠事件屬性以及 CSS 屬性,在頁面上做出聚光燈。[1]
實作連結

Element.getBoundingClientRect()

在前面的章節中,我們學過幾個跟滑鼠位置以及 DOM 上元素位置的屬性,而今天我們要利用新的方法 Element.getBoundingClientRect()。[2]
Element.getBoundingClientRect() 方法,會回傳一 DOMRect 物件,該物件中包含將該元素的大小,以及目前在可視區域中的位置的資料:

  1. DOMRect.top:元素於目前可視範圍中,距離上方邊界的距離。
  2. DOMRect.bottom:元素於目前可視範圍中,距離下方邊界的距離。
  3. DOMRect.left:元素於目前可視範圍中,距離左邊邊界的距離。
  4. DOMRect.right:元素於目前可視範圍中,距離右邊邊界的距離。
  5. DOMRect.x:元素於目前可視範圍中,水平方向的座標。
  6. DOMRect.y:元素於目前可視範圍中,垂直方向的座標。
  7. DOMRect.width:元素的寬。
  8. DOMRect.height:元素的高。

在之前的章節中,我們有使用過元素的 offsetLeft 以及 offsetTop 屬性,但這兩個屬性所得到的值,為子元素在父元素中的位置,如果遇到包了許多層父元素的話,就會變得難以計算。
而透過 DOMRect 物件,我們可以直接利用其中的屬性,結合前面學的 scrollX 以及 scrollY 取得捲動量多寡,就可以簡單計算出我們需要的位置資訊。

進入課題

在今天的課題當中,我們的目的是將所有的 <a> 元素加上聚光燈的效果,因此我們需要先加上監聽事件 mouseover,此事件會在滑鼠移入該元素的時候觸發:

document.querySelectorAll('a').forEach(function(item) {
    item.addEventListener('mouseover', move);
});

要做出聚光燈移動的效果,我們就要在 DOM 中新增出一個元素,並讓他在 mouseover 事件發生時,能移動到我們觸發事件元素的位置,因此我們先建好一個 .highlight 元素,並設定此元素寬跟高都為0,並在觸發的函式中,並透過DOMRect 物件,將指定元素的寬與高指派給 .highlight 元素,而位置的計算可能遇到頁面的捲動而產生誤差,因此要再加上捲動值:

const highLight = document.querySelector('.highLight');

function move (event) {
    let positionData = event.target.getBoundingClientRect();
    let xPosition = positionData.left + window.scrollX;
    let yPosition = positionData.top + window.scrollY;
    let elementWidth = positionData.width;
    let elementHeight = positionData.height;
    highLight.style.left = `${xPosition}px`;
    highLight.style.top = `${yPosition}px`;
    highLight.style.width = `${elementWidth}px`;
    highLight.style.height = `${elementHeight}px`;
};

完成以上的設定之後,再透過 CSS屬性的設定,就能做出聚光燈移動的效果!

.highLight {
  width: 0;
  height: 0;
  transition: all 0.2s;
  border-bottom:2px solid white;
  position: absolute;
  top:100px;
  background:white;
  left:100px;
  z-index: -1;
  border-radius:20px;
  display: block;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

總結

今天我們學到 Element.getBoundingClientRect() 方法以及 DOMRect 物件,透過這個物件,我們能更快取得元素目前於頁面上的位置,並透過結合 CSS 屬性,我們成功在頁面上做出了聚光燈的效果!

參考資料

  1. javascript30
  2. MDN-Element.getBoundingClientRect()

上一篇
JS30-Day21-Geolocation
下一篇
JS30-Day23-Speech Synthesis
系列文
新手也能懂的JS3030

尚未有邦友留言

立即登入留言