鼠标事件 - mousemove - 鼠标移动事件的应用

在前端开发中，鼠标事件是与用户交互的重要组成部分。其中，mousemove 事件是一个非常实用的鼠标事件，它会在鼠标指针在元素内部移动时触发。本文将深入探讨 mousemove 事件的基本概念、应用场景以及实用例子。

基本概念

mousemove 事件是 JavaScript 中鼠标事件的一种，当鼠标指针在某个元素上移动时，该元素就会触发 mousemove 事件。可以通过 addEventListener 方法为元素绑定 mousemove 事件处理函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="box" style="width: 200px; height: 200px; background-color: lightblue;"></div>
    <script>
        const box = document.getElementById('box');
        box.addEventListener('mousemove', function (event) {
            console.log(`鼠标当前位置：x = ${event.clientX}, y = ${event.clientY}`);
        });
    </script>
</body>
</html>

在上述代码中，当鼠标在蓝色方块内移动时，控制台会不断输出鼠标的当前位置。

应用场景

1. 鼠标跟随效果

鼠标跟随效果是 mousemove 事件最常见的应用之一。通过监听鼠标的移动，动态改变元素的位置，使其跟随鼠标移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #follow {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="follow"></div>
    <script>
        const follow = document.getElementById('follow');
        document.addEventListener('mousemove', function (event) {
            follow.style.left = event.clientX + 'px';
            follow.style.top = event.clientY + 'px';
        });
    </script>
</body>
</html>

在这个例子中，一个红色的圆形元素会跟随鼠标在页面上移动。

2. 图片缩放预览

通过 mousemove 事件可以实现图片的缩放预览效果。当鼠标在图片上移动时，显示图片的放大区域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #image-container {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }
        #image {
            width: 100%;
            height: 100%;
        }
        #preview {
            position: absolute;
            top: 0;
            left: 320px;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            overflow: hidden;
        }
        #preview img {
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="image-container">
        <img id="image" src="example.jpg" alt="Example Image">
    </div>
    <div id="preview">
        <img id="preview-image" src="example.jpg" alt="Example Image">
    </div>
    <script>
        const imageContainer = document.getElementById('image-container');
        const previewImage = document.getElementById('preview-image');
        imageContainer.addEventListener('mousemove', function (event) {
            const rect = imageContainer.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            const scaleX = x / rect.width;
            const scaleY = y / rect.height;
            const previewX = -scaleX * (previewImage.width - 200);
            const previewY = -scaleY * (previewImage.height - 200);
            previewImage.style.transform = `translate(${previewX}px, ${previewY}px)`;
        });
    </script>
</body>
</html>

当鼠标在图片上移动时，右侧的预览框会显示图片的放大区域。

3. 绘制画布

mousemove 事件还可以用于在画布上绘制图形。通过监听鼠标的移动，在画布上不断绘制线条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="300"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;
        canvas.addEventListener('mousedown', function (event) {
            isDrawing = true;
            [lastX, lastY] = [event.offsetX, event.offsetY];
        });
        canvas.addEventListener('mousemove', function (event) {
            if (isDrawing) {
                ctx.beginPath();
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(event.offsetX, event.offsetY);
                ctx.stroke();
                [lastX, lastY] = [event.offsetX, event.offsetY];
            }
        });
        canvas.addEventListener('mouseup', function () {
            isDrawing = false;
        });
        canvas.addEventListener('mouseout', function () {
            isDrawing = false;
        });
    </script>
</body>
</html>

在这个例子中，用户可以在画布上按下鼠标并移动来绘制线条。

总结

应用场景	实现思路
鼠标跟随效果	监听 `mousemove` 事件，动态改变元素的位置
图片缩放预览	监听 `mousemove` 事件，根据鼠标位置计算缩放区域并显示
绘制画布	监听 `mousedown`、`mousemove`、`mouseup` 和 `mouseout` 事件，在鼠标按下并移动时绘制线条

mousemove 事件在前端开发中有着广泛的应用，可以为用户带来更加丰富的交互体验。通过合理利用 mousemove 事件，可以实现各种有趣的效果。