js鼠标特效源码

以下是一个简单的JavaScript鼠标特效示例代码，实现当鼠标在页面上移动时，显示一个跟随鼠标的彩色圆圈效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标特效</title>
    <style>
        /* 设置页面全屏并且隐藏滚动条 */
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
            background-color: #000;
        }

        /* 定义跟随鼠标的圆圈样式 */
        .circle {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.3s, width 0.3s, height 0.3s;
        }
    </style>
</head>

<body>
    <script>
        // 监听鼠标移动事件
        document.addEventListener('mousemove', function (e) {
            // 获取鼠标的坐标
            let x = e.clientX;
            let y = e.clientY;

            // 检查是否已经存在圆圈元素
            let circle = document.querySelector('.circle');
            if (!circle) {
                // 如果不存在则创建一个新的圆圈元素
                circle = document.createElement('div');
                circle.classList.add('circle');
                document.body.appendChild(circle);
            }

            // 设置圆圈的位置
            circle.style.left = x + 'px';
            circle.style.top = y + 'px';

            // 随机生成圆圈的颜色
            let color = '#' + Math.floor(Math.random() * 16777215).toString(16);
            circle.style.backgroundColor = color;

            // 设置圆圈的透明度和大小变化效果
            circle.style.opacity = 1;
            circle.style.width = '30px';
            circle.style.height = '30px';

            // 使用setTimeout在一定时间后隐藏圆圈并恢复初始大小
            setTimeout(() => {
                circle.style.opacity = 0;
                circle.style.width = '0px';
                circle.style.height = '0px';
            }, 1000);
        });
    </script>
</body>

</html>

一、基础概念

事件监听
- 在JavaScript中，addEventListener方法用于在指定的元素上监听特定的事件。在这个例子中，我们在document（整个文档）上监听mousemove事件，这个事件会在鼠标在页面内移动时触发。

DOM操作
- 我们通过document.createElement创建新的div元素（圆圈），使用appendChild将其添加到body中。还可以通过修改元素的style属性来改变其外观，如位置、颜色、大小和透明度等。

二、优势

用户体验增强
- 这种鼠标特效可以让网页更加生动有趣，吸引用户的注意力，在一些创意性的网站或者游戏界面中能够增加互动性和视觉吸引力。

简单易实现
- 相对来说，使用JavaScript和CSS就可以轻松实现这样的效果，不需要复杂的框架或者大量的代码资源。

三、应用场景

游戏网站
- 在一些休闲游戏的首页或者加载界面，鼠标特效可以作为一种装饰性的元素，与游戏的风格相匹配。

创意展示网站
- 例如艺术作品展示网站，鼠标特效可以与艺术作品相呼应，营造出独特的浏览氛围。

四、可能出现的问题及解决方法

性能问题（在复杂页面上）
- 如果页面中有大量的元素或者复杂的布局，频繁地创建和操作DOM元素（如这个例子中的圆圈）可能会导致性能下降。
- 解决方法：可以限制圆圈的创建频率，例如使用节流（throttle）或者防抖（debounce）技术。或者预先创建一定数量的圆圈元素并复用它们，而不是每次鼠标移动都创建新的。

兼容性问题
- 在一些老旧的浏览器中，可能对某些CSS属性或者JavaScript方法支持不完全。
- 解决方法：进行浏览器兼容性测试，对于不支持的属性或方法，可以使用替代方案或者添加相应的浏览器前缀。例如，对于border - radius属性，在一些旧浏览器中可能需要添加-webkit -前缀。