开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js实现图片跟随鼠标

基础概念

图片跟随鼠标是一种常见的前端交互效果，通过JavaScript监听鼠标的移动事件，并实时更新图片的位置，使其跟随鼠标指针移动。

实现原理

监听鼠标移动事件：使用mousemove事件来获取鼠标的当前位置。
更新图片位置：根据鼠标的位置动态调整图片的left和top样式属性。

优势

增强用户体验：使页面元素更加生动，提升用户的互动感。
直观展示信息：例如，在电商网站中，可以让商品图片跟随鼠标移动，方便用户查看细节。

类型

简单跟随：图片直接按照鼠标的坐标移动。
平滑跟随：加入缓动效果，使图片移动更加自然。

应用场景

产品展示页：在电商或设计展示平台，让用户更直观地看到产品的各个角度。
游戏界面：在游戏中，指示器或角色可以跟随鼠标移动。
导航辅助：在一些复杂的页面布局中，帮助用户快速定位到特定区域。

示例代码

以下是一个简单的JavaScript实现，展示了如何让图片跟随鼠标移动：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Follow Mouse</title>
<style>
  #followImage {
    position: absolute;
    width: 50px;
    height: 50px;
  }
</style>
</head>
<body>
<img id="followImage" src="path_to_your_image.jpg" alt="Follow Me">

<script>
  // 获取图片元素
  var img = document.getElementById('followImage');

  // 监听鼠标移动事件
  document.addEventListener('mousemove', function(event) {
    // 更新图片位置
    img.style.left = event.clientX + 'px';
    img.style.top = event.clientY + 'px';
  });
</script>
</body>
</html>

可能遇到的问题及解决方法

性能问题：频繁更新DOM可能导致页面卡顿。
- 解决方法：使用requestAnimationFrame来优化动画效果，减少重绘次数。

var x = 0, y = 0;
var img = document.getElementById('followImage');

document.addEventListener('mousemove', function(event) {
  x = event.clientX;
  y = event.clientY;
});

function animate() {
  img.style.left = x + 'px';
  img.style.top = y + 'px';
  requestAnimationFrame(animate);
}

animate();

边界处理：图片可能会移出可视区域。
- 解决方法：添加边界检查逻辑，确保图片始终在页面内。

document.addEventListener('mousemove', function(event) {
  var newX = event.clientX;
  var newY = event.clientY;

  // 边界检查
  if (newX < 0) newX = 0;
  if (newY < 0) newY = 0;
  if (newX > window.innerWidth - img.offsetWidth) newX = window.innerWidth - img.offsetWidth;
  if (newY > window.innerHeight - img.offsetHeight) newY = window.innerHeight - img.offsetHeight;

  img.style.left = newX + 'px';
  img.style.top = newY + 'px';
});

通过以上方法，可以有效实现图片跟随鼠标的效果，并解决可能出现的性能和边界问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS制作跟随鼠标移动的图片

JS制作跟随鼠标移动的图片效果展示案例简介本文讲解如何使用JS制作可以跟随鼠标移动的图片，我这里是用一直天使的gif图片演示的。构建HTML框架跟随鼠标的图片 --> CSS渲染 img {.../* 把图片设置为绝对定位 */ position: absolute; } JS逻辑 <script...(1); // 2.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left 值就可以移动图片 var x =...-- 这里填写需要跟随鼠标的图片 --> // 获取图片元素 var

581 0

jq图片跟随鼠标移动换图

append(img) }, function(){ $(this).children(".active").remove() } ) // 鼠标跟随

1211 0

JS示例34-鼠标跟随事件

一、知识要点 1、onmousemove 鼠标移动事件（要考虑页面滚动） 2、var X = ev.clientX; 3、var Y = ev.clientY + scrollTop; // 加上了滚动距离...> 鼠标跟随事件

6.1K1 0

JS特效：跟随鼠标移动的小飞机

前端网页中，用JS实现鼠标移动时，页面中的小飞机向着鼠标移动。效果源码实现的原理是...：当鼠标在网页中移动时，获取鼠标位置，同时设置飞机指向、并移动飞机位置，直至飞机到达鼠标位置。...vy+=ey/100; } plane.style.left=vx+'px'; plane.style.top=vy+'px'; count++;}由代码中即可知道实现逻辑...如果想独自享用此功能，不想让他人知道原理、不想被他人修改，可以将核心JS代码进行混淆加密。比如用JShaman对上述JS代码加密。加密后的代码，会成为以下形式，使用起来还跟加密前一样。

3272 0

CSS mask 实现鼠标跟随镂空效果

，最后实现效果是这样的：进一步，还能实现任意形状的镂空效果：鼠标经过的地方清晰可见，其他地方则是模糊的。...其实，我们只需要鼠标的坐标，在 CSS 中也能完全实现跟随的效果。这里借助 CSS 变量，那一切就好办了！....wrap::before{ left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); } 然后鼠标坐标的获取可以使用 JS 来计算...从这里就可以看出 CSS 变量的好处，无需修改 JS，只需要在CSS中修改渐变中心点的位置就可以实现了 .wrap::before{ background: radial-gradient( circle.../pen/KKvEBjb 只有想不到，没有做不到七、总结和说明以上实现了一个鼠标跟随镂空的效果，从简单到复杂，从单一到通用，虽然借助了一点点 JS ，但是仅仅是“工具人”的角色，交互逻辑全部都由

2.5K2 0

js小效果之跟随鼠标移动的小球

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/120055629

1.6K2 0

简单鼠标跟随代码

} 46 47 #div10 { 48 background: green; 49 } js

1.2K1 0

原生JS | 导航底部横线跟随鼠标缓动

功能效果功能需求明确横向导航条；当鼠标在导航区域当中左右移动时，横线跟随鼠标移动。...鼠标跟随特效结构分析与jQuery实现方法当中使用的结构有所不同，为了更好的获取标签，所以使用如下代码结构：样式处理样式方面与此前没有什么变化，依旧使用定位的思路来实现，此处不再重复给出样式代码...原生JS功能实现功能代码解析在该效果中，由于鼠标移入淡入或淡出的功能代码的原理与jQuery基本类似，所以不做重复书写，只实现导航底部跟随的效果。...逻辑（原生JS）实现相关知识计时器；缓冲运动；数学对象。计时器通过计时器（此处使用的是setTimeout），实现在一定时间间隔之后，执行一次函数当中的功能。...数学对象在JS当中，最小的单位为1像素，对于缓冲运动当中，所计算出的缓冲结果是存在小数的，这些小数需要计算为整数再做处理。

7.2K8 1

WinForm 实现鼠标拖动控件跟随效果(图文)

* MouseEventArgs e 为事件鼠标参数,因此,e.Location 指示了位于事件源上的光标坐标 * Cursor.Position 获取的是相对于用户屏幕的光标坐标...* 因此,换算后的 Cursor.Position 减去 e.Location 得到的始终是事件源的 Location */ /// /// 鼠标按下为...true /// private bool Mousedown; /// /// 鼠标在事件源的位置 /// </summary

2.3K4 1

JS-鼠标跟随块（一个小圆点跟着鼠标跑）

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> ...

3.2K4 0

基于js鼠标拖动图片排序

分享一款基于js的图片排序效果。鼠标拖动图片，重新排列图片的排列顺序。该插件适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。...效果图如下：在线预览源码下载实现的代码。...0, 0, 0.85); } #ul1 .active { border: 1px dashed red; } js...document.body.scrollLeft; obj.style.zIndex = minZindex++; //当鼠标按下时计算鼠标与拖拽对象的距离...鼠标拖动图片排序

7.8K3 0

WordPress 主题添加鼠标跟随特效

WordPress 主题添加鼠标跟随特效 ---- 将下面代码添加到当前主题函数模板 functions.php 最后： function zm_mouse_cursor() { ?> JS脚本 --> jQuery(document).ready(function($){ var myCursor = jQuery('.mouse-cursor'); if

7142 0

Canvas跟随鼠标炫彩小球

跟随鼠标炫彩小球 canvas没有让我失望，真的很有意思实现效果超级炫酷 ?...实现原理创建小球给小球添加随机颜色，随机半径鼠标移动通过实例化，新增小球通过调用给原型新增的方法，来实现小球的动画效果通过定时器不断地更新画布实现过程创建小球通过创建函数收纳小球所有的样式...，再通过实例化函数，将鼠标当前的位置传递给Ball函数，让通过实例化创建出来的小球，最后将创建出来的小球存入数组中，数组中以对象形式存放着每个小球的属性和属性值 function Ball(x, y,...this.dy = parseInt(Math.random() * 10) - 5;//`-5`是让小球能向四周随机移动 ballArr.push(this);//添加小球 } //监听鼠标移动事件.../画圆，位置，半径 ctx.fillStyle = this.color;//颜色 ctx.fill(); } //监听鼠标移动事件

1.9K4 0

Python+matplotlib实现鼠标跟随的动态距离标注

封面图片：《Python程序设计基础（第2版）》，ISBN：9787302490562，董付国，清华大学出版社图书详情 ==================== 问题描述：显示一幅图像，鼠标左键按下后移动时实时显示当前位置与鼠标按下时初始位置的直线距离

2K2 0

不可思议的纯 CSS 实现鼠标跟随效果

而鼠标跟随这种效果属于行为，要实现通常都需要借助 JS。当然，本文的重点，就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标跟随的行为动画效果。...原理以上面的 Demo 为例子，要使用 CSS 实现鼠标跟随，最重要的一点就是：如何实时监测到当前鼠标处于何处？ OK，其实很多 CSS 效果，都离不开障眼法二字。...+ 1}):hover ~ .ball { top: #{$y * 10}vh; left: #{$x * 10}vw; } } 至此，一个简单的纯 CSS 实现鼠标跟随的效果就实现了...完整的DEMO，你可以戳这里看看：CodePen Demo -- CSS实现鼠标跟随存在的问题就上面的 Demo 来看，还是有很多瑕疵的，譬如精度太差只能控制元素运动到 div 所在空间，而不是精确的鼠标所在位置...CSS鼠标跟随按钮效果一开始，我在 CodePen 上看到了下面这个效果，使用了 SVG + CSS + JS 实现，我就想着，仅用 CSS，能不能 copy 一下： ?

4.6K1 0

JavaScript案例：跟随鼠标的天使

mousemove只要我们鼠标移动1px 就会触发这个事件核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left 值就可以移动图片注意要给left 和top

6131 0

jquery对div元素进行鼠标移动（稍稍修改下可以实现div跟随鼠标）

/* 网上找了资料都是对于event.clientX和offset().left进行了计算，但是去掉了这个计算方式，直接使用当前坐标也一样，效果都一样不太好 s...

2.5K4 0

【说站】CSS鼠标跟随的原理

CSS鼠标跟随的原理说明 1、鼠标跟随就是元素会跟随着鼠标的移动，而作出相对应的运动。 2、为了能够监控当前鼠标的位置，我们只需在页面上铺上元素即可。... .position:nth-child(#{$i + 1}):hover { background: rgba(255, 155, 10, .5) } } 以上就是CSS鼠标跟随的原理

8712 0

幽灵404 页面源码跟随鼠标动画

幽灵会有浮动动画，跟随鼠标动画。在线演示: https://www.zuanmang.net/danye/404youling/图片截图:图片代码:js...[请在此添加图片描述](https://ask8088-private-1251520898.cos.ap-guangzhou.myqcloud.com/developer-images/article

4K2 0

QCustomPlot鼠标跟随显示坐标值

这里解决一个使用图表的都会碰到的问题–跟随鼠标显示值，在QCustomPlot里非常简单，可以直接看下面的效果图。

2.8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭