主題目標
當鼠標移動至某個對應標籤上時,為標籤添加一個白色的背景框,高亮表示該標籤被選中,當鼠標移動至其他標籤後,白色背景框不消失,而是直接跟隨鼠標平移至新的標籤,實現效果見下圖展示。
作品網址:
處理步驟
步驟 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