学习抖音: @渡一前端教科频道
图上指针跟着鼠标移动,并且改变方向
<!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>