鼠标样式和指向

最新推荐文章于 2024-07-12 16:27:40 发布

就是个名称

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量117

点赞数

分类专栏：小demo 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43845059/article/details/132365555

版权

小demo 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

学习抖音： @渡一前端教科频道

图上指针跟着鼠标移动，并且改变方向

<!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 = 0
    window.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>