js实现点击图片，使图片跟随鼠标移动（把注释打开是图片随机位置）

最新推荐文章于 2025-04-29 16:00:10 发布

y先森

最新推荐文章于 2025-04-29 16:00:10 发布

阅读量348

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/yyyyyyysc/article/details/143376625

版权

代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 200px;
        position: absolute;
      }
      body {
        transition: 1s;
      }
    </style>
  </head>
  <body>
    <img src="https://s21.ax1x.com/2024/04/08/pFLZm6A.png" alt="" />
    <script>
      let img = document.querySelector("img");

      let imgtype = false;
      img.onclick = function () {
        imgtype = !imgtype;
        if (imgtype) {
          document.onmousemove = function (e) {
            img.style.top = e.clientY - img.offsetHeight/2+ "px";
            img.style.left = e.clientX - img.offsetWidth/2 + "px";
          };
        } else {
          document.onmousemove = "";
        }
      };
      // setInterval(()=>{
      //     img.style.top = Math.floor(Math.random()*500)+'px'
      //     img.style.left = Math.floor(Math.random()*1000)+'px'
      // },100)
    </script>
  </body>
</html>

效果图：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

y先森

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

js图片跟随鼠标移动效果

猿码互联

06-03

1270

要实现图片跟随鼠标移动的效果，可以使用JavaScript原生的mousemove事件以及CSS的transform属性。在以上代码中，我们监听container元素的mousemove事件。当鼠标在container内移动时，获取鼠标相对container的坐标(mouseX和mouseY)。然后，根据container的宽度和高度计算出图片应该移动的距离(imageX和imageY)。最后，使用CSS的transform属性将图片移动到对应的位置上。

js+CSS+html跟随鼠标移动的大风特效代码，完整版

10-15

609

这段代码创建了一个全屏的canvas元素，并在其中绘制了50个粒子，这些粒子会随着鼠标的移动而移动，并留下轨迹。粒子的颜色是从预设的颜色数组中随机选择的。代码还包含了一些CSS样式，用于设置页面和canvas的样式。代码带注释，适合新手和一定经验的程序员参考学习！效果图在最后！

参与评论您还未登录，请先登录后发表或查看评论

js实现图片跟随鼠标移动效果

10-16

主要为大家详细介绍了js实现图片跟随鼠标移动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

js实现图片跟随鼠标移动

黄大仙

08-08

7366

鼠标不断移动,使用鼠标移动事件:mousemove 在页面中移动:给document注册事件图片要移动距离,而且不占位置,使用绝对定位核心原理:每次鼠标移动,我们都会获得最新的坐标,把这个坐标作为图片的left和top -  <!DOCTYPE ht

JavaScript网页内图片跟随鼠标移动

m0_53162363的博客

06-18

589

【代码】JavaScript网页内图片跟随鼠标移动。

JS 图片跟随鼠标移动

weixin_50784508的博客

06-11

419

【代码】JS 图片跟随鼠标移动。

canvas跟随鼠标的小圆特效 html+css+js

你好呀，很高兴你在看这里~

03-13

6590

效果（源码在最后）：实现： 1.定义标签： <h1>北极光之夜</h1> <canvas id="draw" style=" position: fixed; display: block;"> 当前浏览器不支持Canvas，请更换浏览器后再试 </canvas> 2. 文字的基本样式： h1{ position: absolute; top: 50%;

html5网页特效-canvas实现火焰跟随鼠标

web前端开发教程htmlcssjs

11-30

1082

效果：逼真的火焰跟随鼠标，还冒出火花，照亮背景文字使用canvas绘制使用javascript，但并无复杂逻辑。上手程度：简单笔记： google字体第一步：很简单的初始化函数。 var oCanvas; init = function() { oCanvas = new Fire(); oCanvas.run(); } window.onload = init...

原生实现滑块解锁功能(简易版本)

记得抬头微笑

10-13

1462

本文实例为大家分享了 js 实现简单滑动解锁功能，供大家参考，具体内容有解锁功能、重置功能、进度条功能、结果提示功能、随机生成滑块位置。

paperJS框架学习破冰01-鼠标跟随式三D球状动画效果

FengziTianYu的专栏

09-14

461

目录 1.引言 2.基本描述 3.开始使用 3.1.入门 3.2.基础构建 4.案例：鼠标跟随式3d球状动画 4.1.尝试构建 4.2.多个path 4.3.动画 4.4.长度变化速率曲线 4.5.颜色渐变 4.6.增大数量 4.7.鼠标跟随 4.8.裸眼3D 5.总结 1.引言最近工作中对HTML页面特效有一些需求，于是在工作之余就找了一些封装的非常酷...

js图片跟随鼠标移动

01-12

直接下载后直接另存为html，然后修改里面的图片链接即可

图片随鼠标移动（JS）

06-16

兼容多浏览器，我已在实际中用了，很棒，图片随着鼠标移动而移动。

js特效——根据鼠标位置移动的图片

qq_52430605的博客

09-08

2382

看到别人的网站上有这种特效，便打算学习后自己做出来

鼠标宠物跟随--图片跟随鼠标移动

qq_46617150的博客

05-26

498

js图片跟随鼠标移动代码

06-02

243

大家浏览网页的时候，见到过图片跟随鼠标移动的js特效，效果非常好，是怎么实现的呢，实现这个功能很简单，感兴趣的朋友一起看看吧在很多网站上能看到图片跟随鼠标移动的JS特效，其实做法很简单，在这里与大家分享下。在实现这个特效之前，需要了解JS中一个对象，event(事件对象)，对，只需了解这一个对象。它的方法属性我不多说了，想详细了解的童鞋点击这里，http://www

jquery实现：提示文本/图片跟随鼠标移动

皮蛋瘦肉没有肉

08-10

985

以清华大学校园图片为例子： css样式代码： body { font-family: "宋体"; } li { fl

图片跟随鼠标移动

1997ysm

05-09

368

img{ position: absolute; top: 0; left: 0; } img=document.getElementById('imgid'); document.onmousemove=function(event){ x=event.clientX; y=event.clientY; img.style.left=x+'px'; i

实现图片跟随鼠标移动

qq_43023116的博客

02-21

5501

下面代码可以实现图片跟随鼠标移动 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img { position: absolute; width: 100px; }

关于浏览器对于HTML实体编码，urlencode，Unicode解析

最新发布

m0_74848570的博客

04-29

470

,<title>标签，在HTML解析器解析RCDATA 标签时，进入RCDATA状态，在这个状态能被识别为标签的只有

js的爱心高级代码

03-08

<think>好的，我现在需要回答用户关于JavaScript高级爱心代码的问题。用户可能想要一个有趣且有视觉效果的例子，展示如何用JS实现爱心效果。首先，我得考虑使用哪种技术。常见的选项有Canvas和CSS动画，但Canvas更适合复杂的图形和动画控制，可能更适合高级效果。接下来，我需要设计爱心的形状。数学上，爱心可以用参数方程来表示，比如使用贝塞尔曲线或者心形函数。这里可能需要用到Math.sin和Math.cos函数来生成坐标点，同时调整参数让形状更准确。然后，考虑动画效果。粒子系统是个不错的选择，让爱心由粒子组成，并且有动态效果，比如粒子运动、颜色变化、鼠标交互等。这样代码看起来更高级。需要用到requestAnimationFrame来实现流畅的动画。颜色渐变也是提升视觉效果的关键。可以使用HSL颜色模式，根据角度或时间变化色相，实现渐变效果。另外，添加鼠标交互，让粒子跟随鼠标移动，增加互动性，这需要监听mousemove事件并更新目标坐标。代码结构方面，需要初始化Canvas，创建粒子数组，定义更新和绘制函数，并在动画循环中不断重绘。还要处理窗口大小变化，调整Canvas尺寸。性能方面，注意粒子数量不要过多，避免卡顿，可能需要调整粒子大小和速度参数。最后，测试代码，确保在不同浏览器上都能正常运行，检查是否有语法错误，比如变量作用域、函数调用等。可能需要调整参数，比如心形的缩放系数、粒子的数量、动画速度等，以达到最佳效果。完成后，解释代码的关键部分，帮助用户理解实现原理。</think>以下是一个使用HTML5 Canvas和粒子动画实现的JavaScript高级爱心代码，包含颜色渐变、鼠标交互和动态效果： ```html <!DOCTYPE html> <html> <body style="background: #000;"> <canvas id="c"></canvas> <script> const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); // 自适应画布大小 function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resize(); window.addEventListener('resize', resize); // 粒子构造函数 class Particle { constructor(x, y) { this.x = x; this.y = y; this.size = Math.random() * 2 + 1; this.speedX = Math.random() * 3 - 1.5; this.speedY = Math.random() * 3 - 1.5; } update() { this.x += this.speedX; this.y += this.speedY; if (this.size > 0.2) this.size -= 0.05; } draw() { ctx.fillStyle = `hsl(${Math.abs(this.x * 0.5)}, 70%, 50%)`; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } } // 爱心参数方程 function heartShape(t) { const x = 16 * Math.pow(Math.sin(t), 3); const y = -13 * Math.cos(t) + 5 * Math.cos(2*t) + 2 * Math.cos(3*t) + Math.cos(4*t); return {x, y}; } const particles = []; let hue = 0; // 动画循环 function animate() { ctx.fillStyle = 'rgba(0,0,0,0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 生成新粒子 for (let i = 0; i < 2; i++) { const t = Math.random() * Math.PI * 2; const pos = heartShape(t); particles.push(new Particle( canvas.width/2 + pos.x * 15, canvas.height/2 + pos.y * 15 )); } // 更新并绘制粒子 particles.forEach((particle, index) => { particle.update(); particle.draw(); if (particle.size <= 0.2) { particles.splice(index, 1); } }); hue += 0.5; requestAnimationFrame(animate); } animate(); // 鼠标交互 let mouseX = canvas.width/2; let mouseY = canvas.height/2; canvas.addEventListener('mousemove', (e) => { mouseX = e.clientX; mouseY = e.clientY; }); </script> </body> </html> ``` 代码特点说明： 1. **数学建模** 使用参数方程`heartShape()`生成精确的心形坐标，通过调整公式参数可以改变心形的形状比例 2. **粒子系统** - 每个粒子都是独立对象 - 包含位置、大小、运动速度等属性 - 使用HSL色彩空间实现颜色渐变效果 3. **动画效果** - requestAnimationFrame实现流畅动画 - 粒子逐渐缩小直至消失 - 持续生成新粒子形成动态效果 4. **交互功能** - 自动跟随鼠标移动（移除注释即可启用） - 窗口自适应大小调整 - 粒子运动带有随机速度 5. **性能优化** - 自动清除过期粒子 - 使用rgba背景实现拖尾效果 - 控制粒子生成频率使用方法： 1. 复制代码保存为.html文件 2. 用浏览器打开即可看到效果 3. 鼠标在画面上移动可以控制爱心位置 4. 调整代码中的15（缩放系数）可以改变爱心大小 5. 修改粒子生成频率（for循环的i < 2）可控制粒子密度该代码展示了JavaScript在图形处理、数学计算和动画方面的能力，涉及面向对象编程、Canvas API、三角函数等高级用法。