jquery 随鼠标移动的图片

封面图 • 2025-05-18 • jQuery

要实现一个随鼠标移动的图片效果，可以使用 jQuery 来监听鼠标的移动事件，并根据鼠标的当前位置来动态调整图片的位置。以下是一个简单的示例代码：

### HTML:
```html
<!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;
            overflow: hidden; /* 防止页面滚动 */
        }
        #moving-image {
            position: absolute;
            transition: transform 0.1s ease; /* 平滑过渡 */
        }
    </style>
</head>
<body>

$(document).on('mousemove', function(e) {
            // 获取鼠标在窗口中的位置
            var mouseX = e.clientX;
            var mouseY = e.clientY;

// 计算图片的中心点位置
            var imageWidth = $image.width();
            var imageHeight = $image.height();
            var centerX = mouseX - (imageWidth / 2);
            var centerY = mouseY - (imageHeight / 2);

// 确保图片不会超出容器范围
            if (centerX < 0) {
                centerX = 0;
            } else if (centerX + imageWidth > containerWidth) {
                centerX = containerWidth - imageWidth;
            }

if (centerY < 0) {
                centerY = 0;
            } else if (centerY + imageHeight > containerHeight) {
                centerY = containerHeight - imageHeight;
            }

// 设置图片的位置
            $image.css({
                left: centerX,
                top: centerY
            });
        });
    });
</script>

</body>
</html>
```

### 解释：
1. **HTML部分**：我们创建了一个 `img` 标签作为需要跟随鼠标移动的图片。
   
2. **CSS部分**：通过设置 `position: absolute`，我们可以让图片相对于父容器（即整个窗口）进行定位。

3. **JavaScript部分**：
   - 使用 `$(document).on('mousemove', ...)` 监听鼠标移动事件。
   - 在每次鼠标移动时，获取鼠标的坐标 (`e.clientX` 和 `e.clientY`)。
   - 计算图片的中心点位置，并确保图片不会超出窗口边界。
   - 使用 `$image.css()` 方法动态更新图片的位置。

4. **平滑过渡**：通过 `transition: transform 0.1s ease`，可以让图片的移动更加平滑。

### 注意事项：
- 请将 `your-image.jpg` 替换为你自己的图片路径。
- 如果你希望图片始终在屏幕中央跟随鼠标移动，可以直接将图片的中心点设置为鼠标的位置，而不需要计算边界限制。

这样就可以实现一个随鼠标移动的图片效果了！