首页用JavaScript写一个图片随鼠标X坐标移动的效果，别用jQuery

用JavaScript写一个图片随鼠标X坐标移动的效果，别用jQuery

时间: 2025-01-05 07:44:36 浏览: 3

当然可以！以下是一个使用纯JavaScript实现的图片随鼠标X坐标移动的效果示例： ```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; } #image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: left 0.1s linear; } </style> </head> <body> <img src="your-image-url.jpg" alt="Moving Image" id="image" width="100"> <script> const image = document.getElementById('image'); document.addEventListener('mousemove', (event) => { const mouseX = event.clientX; const windowWidth = window.innerWidth; const imageWidth = image.offsetWidth; const maxX = windowWidth - imageWidth; let newX = (mouseX / windowWidth) * maxX; // 防止图片移出窗口 newX = Math.max(0, Math.min(newX, maxX)); image.style.left = newX + 'px'; }); </script> </body> </html> ``` 这个示例中，图片会根据鼠标在X轴上的位置移动。具体实现步骤如下： 1. **HTML部分**：创建一个包含图片的`<img>`标签，并设置其`id`为`image`。 2. **CSS部分**：设置`body`的`margin`为`0`，并隐藏滚动条。设置图片的初始位置为页面中心，并添加过渡效果。 3. **JavaScript部分**： - 获取图片元素。 - 添加`mousemove`事件监听器，监听鼠标移动事件。 - 计算鼠标在X轴上的位置，并根据窗口宽度和图片宽度计算图片的新位置。 - 设置图片的`left`样式属性，使图片移动到新的位置。

阅读全文