[Day22] Follow Along Links

[Day22] Follow Along Links

需要用到的技巧与练习目标

1.getBoundingClientRect

const triggers = document.querySelectorAll('a');
const highlight = document.createElement('span');
hightight.classList.add('highlight');
doccument.body.append(highlight);

function highlightLink(){
const linkCoords = this.getBonudingClientRect();
const coords={

width:linkCoords.width,
height:linkCoords.height,
top:linkCoords.top + window.scrollY,
left:linkCoords.left +window.scrollX
};

higtlight.style.width=`${coords.width}px`;
higtlight.style.height=`${coords.height}px`;
higtlight.style.transform=`translate(${coords.left}px, ${coords.top}px)`
}
tiggers.forEach(a => a.addEventListener('mouseenter',highlightLink))

参考资料来源:

1. https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect