學習抖音: @渡一前端教科頻道
圖上指針跟著鼠標移動,并且改變方向
?
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>* {padding: 0;margin: 0;}.arrow {position: fixed;width: 30px;height: 30px;margin-left: -15px;}.arrow img {width: 100%;height: 100%;display: block;}html {cursor: none;}</style>
</head><body><div class="arrow"><img src="./arrow.png" alt=""></div>
</body><script>let arrow = document.querySelector(".arrow")let rad = 0window.onmousemove = (e) => {if (Math.abs(e.movementX) + Math.abs(e.movementY) > 2) {// 計算角度 反正切 這里y是要去負數 因為 這里的Y軸方向是從上到下rad = Math.atan2(e.movementX, -e.movementY)}arrow.style.transform = `translate(${e.clientX}px, ${e.clientY}px) rotate(${rad}rad)`}
</script></html>
?
?
?