jquery 随鼠标移动的图片
2025-05-18 18:40
jQuery
116
0
0
0
标题录入
封面图
要实现一个随鼠标移动的图片效果,可以使用 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> <img id="moving-image" src="your-image.jpg" alt="Moving Image" width="100" height="100"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { var $image = $('#moving-image'); var containerWidth = $(window).width(); var containerHeight = $(window).height(); $(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` 替换为你自己的图片路径。 - 如果你希望图片始终在屏幕中央跟随鼠标移动,可以直接将图片的中心点设置为鼠标的位置,而不需要计算边界限制。 这样就可以实现一个随鼠标移动的图片效果了!
上一篇:
小笑话
下一篇:
禁止鼠标右键的几种方法
标题录入,一次不能超过6条
冥想是什么?怎么冥想?
T:0.008027s,M:126.23 KB
返回顶部
留言
留言
评论