Javascript | Js实现网站中隐藏鼠标改为自定义图片

大家好我是山河,今天给大家带来Javascript | Js实现网站中隐藏鼠标改为自定义图片,

有很多网友想把网页上的浏览鼠标换成自己喜欢的图片显示,今天山河就来给大家实现这个功能。

代码由 Javascript + html + css 实现 山河把代码注释都标齐全,轻轻松松学会

我换成了这个

shanhe鼠标效果图
鼠标图片

效果图,我录屏拍摄的帧率不高,

shanhe鼠标效果图
shanhe鼠标效果图

是不是鼠标没了换成了这个更好看了呢,最重要的是自定义了,想变啥变啥

话不多说,直接上代码

注释也给大家写好了,一看就明白

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山河教程blog.shanhe.info-网站中隐藏鼠标改为自定义图片</title>
    <style>
        /* 默认外边距内边距为0 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 将图片默认设置为隐藏 */
        .shanhe-website-mouse {
            display: none;
            position: absolute;
            width: 30px;
        }
    </style>
</head>
<body>
    <!-- 页面要有元素撑开 -->
    <div style="height: 100vh;width: 100%;">
        <!-- 替换鼠标的自定义图片 -->
        <img class="shanhe-website-mouse" id="img" src="./MC.png" alt="MC鼠标">
    </div>
    <!-- 山河教程网站原创文章-blog.shanhe.info -->
    <script>
        // 页面加载完成执行函数
        window.addEventListener('load', function(){
            // 获取body
            var body = document.body;
            // 窗口绑定鼠标移动事件
            window.onmousemove = function(m) {
                // 隐藏鼠标
                body.style.cursor = 'none';
                // 鼠标坐标
                var m = m || window.event;
                console.log(m);
                // 获取鼠标横坐标与纵坐标
                var x = m.pageX;
                var y = m.pageY;
                // 设置自定义图片位置(由于本案例是替换鼠标,所以不更改)
                // 获取自定义图片并设置显示再设置位置
                document.getElementById('img').style.display = 'block';
                document.getElementById('img').style.left = x - 29 + 'px';
                document.getElementById('img').style.top = y + 'p
            }
        });
    </script>
</body>
</html>
代码图片

好了,教程结束

本文是山河博客原创文章,转载请注明

下载地址在最下方

相关文件下载地址
©下载资源版权归作者所有;如果没有特殊声明,那么此资源就是来源于网络或者用户上传,仅供学习使用,请支持正版,下载后请24小时自行内删除!