开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js代码鼠标跟随粒子特效

基础概念：鼠标跟随粒子特效是一种常见的网页交互效果，它通过JavaScript和CSS实现，使得页面上的粒子元素能够跟随鼠标指针移动，从而增强用户的交互体验。

优势：

增强互动性：使用户感觉页面更加生动和有趣。
视觉吸引力：吸引用户的注意力，提升用户体验。
技术展示：展示开发者的技术能力。

类型：

简单跟随：粒子直接跟随鼠标移动。
平滑跟随：粒子以一定的速度和加速度平滑地跟随鼠标。
复杂轨迹：粒子根据特定的算法（如贝塞尔曲线）跟随鼠标。

应用场景：

网站首页：作为背景特效提升视觉效果。
游戏界面：增加游戏的互动性和趣味性。
广告页面：吸引用户注意力，提高广告效果。

示例代码：以下是一个简单的鼠标跟随粒子特效的JavaScript和HTML/CSS代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse Follow Particles</title>
<style>
  body {
    margin: 0;
    overflow: hidden;
  }
  .particle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ff0000;
    pointer-events: none;
  }
</style>
</head>
<body>
<script>
  const numParticles = 50;
  const particles = [];

  class Particle {
    constructor() {
      this.x = 0;
      this.y = 0;
      this.size = Math.random() * 5 + 5;
      this.speedX = Math.random() * 3 - 1.5;
      this.speedY = Math.random() * 3 - 1.5;
      this.element = document.createElement('div');
      this.element.className = 'particle';
      this.element.style.width = `${this.size}px`;
      this.element.style.height = `${this.size}px`;
      document.body.appendChild(this.element);
    }

    update(mouse) {
      const dx = mouse.x - this.x;
      const dy = mouse.y - this.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      const forceDirectionX = dx / distance;
      const forceDirectionY = dy / distance;
      const maxDistance = 100;
      const force = (maxDistance - distance) / maxDistance;
      const directionX = forceDirectionX * force * 10;
      const directionY = forceDirectionY * force * 10;

      if (distance < maxDistance) {
        this.x -= directionX;
        this.y -= directionY;
      }

      this.x += this.speedX;
      this.y += this.speedY;

      this.element.style.left = `${this.x}px`;
      this.element.style.top = `${this.y}px`;
    }
  }

  for (let i = 0; i < numParticles; i++) {
    particles.push(new Particle());
  }

  document.addEventListener('mousemove', (event) => {
    const mouse = { x: event.clientX, y: event.clientY };
    particles.forEach(particle => particle.update(mouse));
  });
</script>
</body>
</html>

常见问题及解决方法：

性能问题：如果页面上的粒子数量过多，可能会导致页面卡顿。可以通过减少粒子数量或使用requestAnimationFrame优化动画性能。
性能问题：如果页面上的粒子数量过多，可能会导致页面卡顿。可以通过减少粒子数量或使用requestAnimationFrame优化动画性能。
粒子重叠：粒子之间可能会发生重叠，影响视觉效果。可以通过增加粒子的随机性或调整粒子的移动速度来避免重叠。
边界处理：粒子可能会移出视口边界。可以通过检测粒子的位置并限制其在视口内来解决。
边界处理：粒子可能会移出视口边界。可以通过检测粒子的位置并限制其在视口内来解决。

通过以上方法，可以有效实现并优化鼠标跟随粒子特效。

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

有帮助

没帮助

相关·内容

❤️创意网页：HTML5,canvas创作科技感粒子特效（科技感粒子、js鼠标跟随、粒子连线）

科技感粒子特效网页在本篇技术博客中，我们将学习如何创建一个令人赞叹的科技感粒子特效网页。...这个特效网页将会展示一个动态的、精美的粒子效果，同时会随着鼠标的移动而产生连线效果，增添一份炫酷的科技氛围。我们将使用HTML、CSS和JavaScript来实现这个效果。...动态图展示静态图展示图1 图2 视频展示 HTML5粒子连接项目代码解析 HTML 结构首先，我们来看一下HTML结构。代码中只有一个元素，这是我们用来绘制粒子特效的画布。...这里使用了标签将JavaScript代码嵌入到HTML中。代码的主要功能包括：创建粒子和连线的类。初始化粒子数组，并在画布上绘制粒子。...根据鼠标的位置更新粒子的运动状态，并绘制粒子之间的连线。实现动画效果，使粒子和连线随着时间不断更新。

2.1K1 0

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

前端网页中，用JS实现鼠标移动时，页面中的小飞机向着鼠标移动。效果源码鼠标位置，同时设置飞机指向、并移动飞机位置，直至飞机到达鼠标位置。...如果想独自享用此功能，不想让他人知道原理、不想被他人修改，可以将核心JS代码进行混淆加密。比如用JShaman对上述JS代码加密。加密后的代码，会成为以下形式，使用起来还跟加密前一样。...特效，但效果挺不错。...劳逸结合，写代码久了，休息休息。

3272 0

WordPress 主题添加鼠标跟随特效

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

7142 0

js代码网页背景粒子特效代码

效果图如下： JS代码如下： js/1.0.0/canvas-nest.min.js'> 将上面js代码添加到网站底部即可！

10.5K5 0

简单鼠标跟随代码

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

1.2K1 0

评论框鼠标点击特效js代码

效果可以看本博客的评论框 [collapse title="特效JS代码"] (function webpackUniversalModuleDefinition(a,b){if(typeof exports...POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE); [/collapse] 将其上面代码复制进一个新建的...js文件，放在网站目录某个地方，然后编辑主题文件模板名称/component/footer.php 在后面添加以下代码。...JS文件路径)"> 博主只在目前使用的模板测试成功使用，其他模板自测。

10.1K5 0

jQuery特效 | 导航底部横线跟随鼠标缓动

HTML5学堂（码匠）：jQuery来实现如下特效 - 在导航底部存在一条横线，跟随着鼠标缓动到相应导航项底部。...今天就针对该特效来说说如何开发（本次内容使用jQuery进行讲解，原生JavaScript代码下周一奉上）功能效果图 ?...功能需求明确横向导航条；当鼠标移入导航区域的时候，在当前导航底部淡入一个横线；当鼠标在导航区域当中左右移动时，横线跟随鼠标移动；当鼠标移出导航区域的时候，横线淡出。...导航跟随 - 实现结构分析在此功能当中，核心在于结构的搭建，导航底部的横线能够来回运动，那么该横线必然需要定位到当前导航当中，因此可以确定如下的结构代码 ?...关于完整代码如需查看完整代码，请前往：http://codepen.io/majiang/pen/zZGdKW （有可能因为网络原因，导致加载速度较慢）。

8.7K5 0

JS示例34-鼠标跟随事件

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

6.1K1 0

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

JS制作跟随鼠标移动的图片效果展示案例简介本文讲解如何使用JS制作可以跟随鼠标移动的图片，我这里是用一直天使的gif图片演示的。构建HTML框架跟随鼠标的图片 --> CSS渲染 img {.../* 把图片设置为绝对定位 */ position: absolute; } JS逻辑 <script...pic.style.left = x - 50 + 'px'; pic.style.top = y - 42 + 'px'; }); 完整代码...-- 这里填写需要跟随鼠标的图片 --> // 获取图片元素 var

581 0

个人博客主题模板给鼠标添加跟随特效教程

昨天写了一个网页鼠标特效的小玩具，当然代码不是我的，源自知更鸟，插件也很简单，但是考虑到不是所有人都喜欢用插件，包括我自己，所以今天抽空在写一个详细的教程，直接把代码写在主题里就不需要额外的开启插件了，...一般主题模板都有预留自定义css和统计代码接口，我们需要用这两个接口实现鼠标特效，为什么不直接在主题模板中修改，因为修改源代码之后我们再次更新会导致主题模板恢复，那么我们修改的代码就没有了，还得重新添加...因为我在本地测试的时候发现，在移动端打开页面之后这个特效的鼠标会默认的停留在顶部左侧的位置，所以我就隐藏了，喜欢保留的可以删除最后那一段。...，把js代码放在footer中就可以了，看了下基本上不会跟主题的代码有任何的冲突，如果是修改源代码的话记得备份，免费出错导致网站出错。...PS：关于鼠标特效网上的教程也是五花八门的，但是总体来说都是为网站锦上添花的操作，我比较喜欢简介的，所以没设置一些花里胡哨的特效，会让我觉得喧宾夺主，好了，仅是个人看好，这次教程文章完成了，继续更新主题模板啦

7325 0

个人博客主题模板给鼠标添加跟随特效教程

昨天写了一个网页鼠标特效的小玩具，当然代码不是我的，源自知更鸟，插件也很简单，但是考虑到不是所有人都喜欢用插件，包括我自己，所以今天抽空在写一个详细的教程，直接把代码写在主题里就不需要额外的开启插件了，...一般主题模板都有预留自定义css和统计代码接口，我们需要用这两个接口实现鼠标特效，为什么不直接在主题模板中修改，因为修改源代码之后我们再次更新会导致主题模板恢复，那么我们修改的代码就没有了，还得重新添加...因为我在本地测试的时候发现，在移动端打开页面之后这个特效的鼠标会默认的停留在顶部左侧的位置，所以我就隐藏了，喜欢保留的可以删除最后那一段。...，把js代码放在footer中就可以了，看了下基本上不会跟主题的代码有任何的冲突，如果是修改源代码的话记得备份，免费出错导致网站出错。...PS：关于鼠标特效网上的教程也是五花八门的，但是总体来说都是为网站锦上添花的操作，我比较喜欢简介的，所以没设置一些花里胡哨的特效，会让我觉得喧宾夺主，好了，仅是个人看好，这次教程文章完成了，继续更新主题模板啦

8194 0

【说站】JS代码实现鼠标点击爱心特效

本文编程笔记首发使用非常简单，需要在哪个页面显示就把代码放到哪个页面就行。 !

3.5K1 0

❤️创意网页：绚丽粒子炸裂特效①（真的超好看）超好看的粒子交互跟随效果~彩色随机粒子爆裂

HTML5的元素提供了一个强大的绘图环境，结合JavaScript的动态特性，我们可以轻松实现各种视觉效果，例如粒子效果、动画和过渡效果等。...实现视觉效果震撼的网页下面是一个简单的HTML文档，通过HTML5的元素和JavaScript代码，创建了一个令人惊叹的视觉效果。...该网页会在用户的鼠标移动时，产生绚丽多彩的粒子效果，为用户带来沉浸式的交互体验。代码） JavaScript代码解析 JavaScript代码部分负责创建粒子效果和实现动画效果。...我们使用一个Particle类来表示每个粒子，每个粒子具有随机的大小、颜色和速度，使得粒子在画布上随机运动。

2401 0

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

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

1.6K2 0

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

功能效果功能需求明确横向导航条；当鼠标在导航区域当中左右移动时，横线跟随鼠标移动。...鼠标跟随特效结构分析与jQuery实现方法当中使用的结构有所不同，为了更好的获取标签，所以使用如下代码结构：样式处理样式方面与此前没有什么变化，依旧使用定位的思路来实现，此处不再重复给出样式代码...，如果需要可以查看上一篇jQ特效文章（该文章底部有相应链接），或点击文章底部的“阅读原文”，查看源代码。...原生JS功能实现功能代码解析在该效果中，由于鼠标移入淡入或淡出的功能代码的原理与jQuery基本类似，所以不做重复书写，只实现导航底部跟随的效果。...数学对象在JS当中，最小的单位为1像素，对于缓冲运动当中，所计算出的缓冲结果是存在小数的，这些小数需要计算为整数再做处理。

7.2K8 1

【说站】唯美好看的鼠标滑动特效在线JS代码

本文编程笔记首发在网站需要显示的页面添加上代码即可 <!

3.3K1 0

js代码实现鼠标点击爱心、爱国文字特效

span标签 var $i = $("").text(a[a_idx]); //下标等于原来下标+1 余词语总数 a_idx = (a_idx + 1)% a.length; //获取鼠标指针的位置...//获取x和y的指针坐标 var x = e.pageX, y = e.pageY; //在鼠标的指针的位置给$i定义的span标签添加css样式 $i.css({"z-index" : 999999,

5.5K2 0

学习Particles.js 给网页来点粒子特效

今天我们来学习一下particles.js Particles.js是一个开源的轻量级JavaScript库，它帮助你创建漂亮的交互式粒子效果。...它基于HTML5 canvas元素，能够在背景中生成动态的粒子效果。它可以通过调整不同的选项来定制化粒子形状、数量、大小、颜色、运动速度等等。...除此之外，particles.js 还支持响应式设计，可以让效果在不同的设备上呈现出不同的表现。...这个库非常适合用于网站、应用程序和其他数字媒体项目中，以增加互动的效果并吸引用户的注意力官网地址:particles.js – 一个轻量级、无依赖性和响应迅速的 JavaScript 插件，用于粒子背景...(marcbruederlin.github.io) 先看效果安装使用npm npm install particlesjs —-save // 引入粒子 js import Particles from

4831 0

原生JS实现鼠标滑动撒爱心特效

给大家分享一个鼠标滑动撒爱心的特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。原生JS...实现鼠标滑动撒爱心特效 * { margin: 0; padding: 0;...heart.remove() }, 3000) }) 以下是上面代码中引入的图片

4.9K3 0

网页鼠标点击特效代码

我在网页的源代码中找到了这个鼠标点击特效代码，贴在下面。...代码复制到后台代码填写的地方，刷新网页，有漂亮的点击效果 var a_idx = 0; jQuery(document).ready(function($) { $("body

5.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭