[JS作品]JS30系列22 – Follow Along Link Highlighter

 

主題目標

當鼠標移動至某個對應標籤上時，為標籤添加一個白色的背景框，高亮表示該標籤被選中，當鼠標移動至其他標籤後，白色背景框不消失，而是直接跟隨鼠標平移至新的標籤，實現效果見下圖展示。

作品網址：

Demo作品連結
JavaScript 30 作品目錄

處理步驟

步驟 1.

取得所有超連結    

 // 取得所有超連結 a 同時class是.a的
    const triggers = document.querySelectorAll('a.a');

建立 highlight 元素

 	const hightlight = document.createElement('span');
	// 設定 CSS
    hightlight.classList.add('highlight');
    // 加入到 body
    document.body.appendChild(hightlight);

步驟 2.

用陣列的方式，讓每個超連結的元素，綁定 mouseenter 事件

//創建highlightLink 方法
function highlightLink() {
}

// 對所有超連結綁定事件
triggers.forEach(a => a.addEventListener("mouseenter", highlightLink));

步驟 3.

highlightLink 方法 的內容撰寫，主要是設定 highlight 大小與位置，利用 getBoundingClientRect 取得目前元素大小與位置。

 //創建highlightLink 方法
    function highlightLink(){
      // 取得元素的大小與位置
      const linkCoords = this.getBoundingClientRect();
      console.dir(linkCoords);
      //用json的方式，一次宣告好幾個值
      const coords = {
        width: linkCoords.width,
        height: linkCoords.height,
        top:linkCoords.top + window.scrollY,
        left:linkCoords.left +window.scrollX
      }
      // 設定 highlight 寬度等於目前元素寬度
      highlight.style.width = `${coords.width}px`;
      // 設定 highlight 高度等於目前元素高度
      highlight.style.height = `${coords.height}px`;
        
      console.log([window.scrollX,window.scrollY,coords.left,coords.top]);
      // 移動 highlight 元素到目前元素位置，考量因為有 scroll bar
      highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
    
    }

特別技術、函式

<HTML>

<CSS>

<JavaScript>

Element.getBoundingClientRect()

返回元素的大小及其相對於視口的位置。

Element: mouseenter event

當定點設備（通常指鼠標）移動到元素上時就會觸發 mouseenter 事件

參考資料：

JS30紀錄 22-Follow Along Link Highlighter：https://shunnien.github.io/2018/01/17/Javascript30days-22/

Js 30 day 中文指南：https://github.com/soyaine/JavaScript30

Tags:

Steven玄

謝謝您觀看本站內容!! 😅 西元93年台灣男，軟體前、後、資料庫工程師 和 多元收入實踐，程式設計、網站系統規劃、商業策略分析規劃、多元收入研究，目前在網站開發公司擔任工程師。

發佈留言