网站动态背景粒子线条跟随鼠标移动，吸附鼠标效果代码

最新推荐文章于 2024-04-26 06:37:48 发布
最新推荐文章于 2024-04-26 06:37:48 发布
阅读量1.2k 收藏 7
点赞数 5
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44953227/article/details/118637564
版权

说明

作者：姜成SEO

原文链接：https://blog.csdn.net/qq_40223005/article/details/80810695

效果图

粒子线条跟随鼠标移动效果图

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粒子线条-线条吸附鼠标动</title>
</head>

<body>
    <script>
        //rgb颜色随机
        function rgb() {
			var r = Math.floor(Math.random()*256);
			var g = Math.floor(Math.random()*256);
			var b = Math.floor(Math.random()*256);
			var rgb = '('+r+','+g+','+b+')';
            console.log("当前颜色：" + rgb);
			return rgb;
		}

        // 16进制随机颜色
        function randomColor() {
            return "#" + Math.floor(Math.random() * 16777215).toString(16);
        }

        !function () {

            function n(n, e, t) {

                return n.getAttribute(e) || t

            }

            function e(n) {

                return document.getElementsByTagName(n)

            }

            function t() {

                var t = e("script"), o = t.length, i = t[o - 1];

                return {

                    l: o, z: n(i, "zIndex", -1), o: n(i, "opacity", .5), c: n(i, "color", "0,0,0"), n: n(i, "count", 99)

                }

            }

            function o() {

                a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,

                    c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

            }

            function i() {

                r.clearRect(0, 0, a, c);

                var n, e, t, o, m, l;

                s.forEach(function (i, x) {

                    for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++)n = u[e],

                        null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y,

                            l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m),

                                // t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
                                t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = randomColor(), r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))

                }),

                    x(i)

            }

            var a, c, u, m = document.createElement("canvas"),

                d = t(), l = "c_n" + d.l, r = m.getContext("2d"),

                x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

                    function (n) {

                        window.setTimeout(n, 1e3 / 45)

                    },

                w = Math.random, y = { x: null, y: null, max: 2e4 }; m.id = l, m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o, e("body")[0].appendChild(m), o(), window.onresize = o,

                    window.onmousemove = function (n) {

                        n = n || window.event, y.x = n.clientX, y.y = n.clientY

                    },

                    window.onmouseout = function () {

                        y.x = null, y.y = null

                    };

            for (var s = [], f = 0; d.n > f; f++) {

                var h = w() * a, g = w() * c, v = 2 * w() - 1, p = 2 * w() - 1; s.push({ x: h, y: g, xa: v, ya: p, max: 6e3 })

            }

            u = s.concat([y]),

                setTimeout(function () { i() }, 100)

        }();

    </script>
</body>

</html>
weixin_44953227
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JS html5实现跟随鼠标移动而散开的粒子效果.zip
07-05
JS html5实现跟随鼠标移动而散开的粒子效果
JavaScript实现鼠标移动粒子跟随效果
10-16
这个简单的示例展示了如何使用JavaScript和Underscore库来创建动态的粒子跟随鼠标移动的效果。通过对粒子的实时更新和绘制，可以创建出引人入胜的交互式用户界面。你可以根据需求调整粒子的数量、大小、颜色、速度等...
博客背景线条实现
dengxingrao0615的博客
08-09 879
背板子 <!--代码放置于</body>上方--> <script> !function(){ function n(n,e,t){ return n.getAttribute(e)||t } function e(n){ return document.getElementsByTagName(n) ...
html--鼠标跟随特效
最新发布
stqer的博客
04-26 1161
【代码】html--鼠标跟随特效。
网站动态背景粒子线条跟随鼠标移动，吸附鼠标效果代码2
weixin_44953227的博客
07-10 775
说明 作者：weixin_44149978 原文链接：https://blog.csdn.net/weixin_44149978/article/details/98076605 效果图 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>粒子线条canvas效果</title> <style> .
跟随鼠标移动的粒子线条
Yugoup的博客
05-23 1079
//在body内引入这行js即可实现 //ps:必须在body内引入 <script src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script> //如果要改变颜色（RGB），透明度，层级,线条数量，直接在<script>内写即可 <script type="tex...
html中有很多粒子线条，鼠标轻轻移动会以鼠标为中心吸附，鼠标快速移动就会断开。就像磁铁一样
Fishroad的博客
12-30 942
<html> <head> ... </head> <body> ... ... ... <script src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script> </body> &l...
html5 canvas粒子背景跟随鼠标移动效果代码
11-06
html5 canvas粒子背景跟随鼠标移动效果代码 html5 canvas粒子背景跟随鼠标移动效果代码
粒子线条吸附鼠标效果代码2.html
07-10
粒子线条吸附鼠标效果代码2，是一个完全由JavaScript来生成的动态背景效果，看起来还可以，每100毫秒刷新一次，非常nice，这个是第二种实现方式，相较于前一种这种可读性更强
科技风-粒子特效-js动画-网页背景动效-可跟随鼠标移动-源码
09-22
很多博客背景的科技风粒子特效，html源码，可以F12全屏当作背景版也可以自己开发到页面里当作背景特效
粒子线条吸附鼠标效果代码.html
07-10
粒子线条吸附鼠标效果代码，是一个完全由JavaScript来生成的动态背景效果，看起来还可以，每100毫秒刷新一次，非常nice
html5 canvas粒子线条连接背景动画特效
09-08
html5 canvas粒子线条连接背景动画特效
Canvas粒子线条连接动态背景特效
06-24
Canvas粒子线条连接动态背景特效是一款可用于引导页的粒子线条动画特效。
Canvas粒子线条连接动态背景特效特效代码
03-20
Canvas粒子线条连接动态背景特效是一款可用于引导页的粒子线条动画特效。
H5粒子旋转跟随光标动画特效
06-24
H5粒子旋转跟随光标动画特效是一款基于HTML5 Canvas制作的粒子圆形旋转跟随鼠标移动粒子光标特效。
网站背景跟随鼠标移动的粒子线条
zhenxing的博客
10-13 208
//在公用页内引入这行js即可实现 <script src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script> //如果要改变颜色（RGB），透明度，层级,线条数量，直接在<script>内写即可 <script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src=.
【前端 Canvas 训练营】第一期：鼠标交互粒子背景效果
米糊的头发箱（码代码掉的头发都在这里了）
11-06 907
这是一个全新的系列，在这个系列中，我将通过一系列实际案例，和你一起学习、研究Canvas，从而掌握编写 Canvas 特效的能力。 HTML5 canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。 canvas 标签只是图形容器，您必须使用脚本来绘制图形。 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 这是一个注重实际案例的例子，我希望能够通过具体的案例，而非抽象的文档和解释带你学习 Canvas 这项技术。那么废话不多说，我们直接看
鼠标吸附特效-有意思的小游戏
li_xiaobai的博客
07-25 188
<html> <head> <link rel="stylesheet" type="text/css" href="{% static 'mycss.css' %}"> <meta charset="UTF-8"> <title>Untitled Document</title> <style type="text/css"> body { backgr
跟随鼠标一起流动的粒子动画 JS 原生代码
Yiu的博客
03-22 7493
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset=gbk&gt; &lt;title&gt;粒子效果演示 &lt;/title&gt; &lt;style type="text/css"&gt; html, body { text-align: cen
js实现跟随鼠标粒子效果
03-31
以下是一个简单的js代码实现跟随鼠标粒子效果： HTML： ```html <canvas id="canvas"></canvas> ``` CSS： ```css #canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ``` JS： ```javascript var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var particles = []; var mouse = { x: undefined, y: undefined } window.addEventListener("mousemove", function(event) { mouse.x = event.x; mouse.y = event.y; }); function Particle(x, y, radius, color) { this.x = x; this.y = y; this.radius = radius; this.color = color; this.radians = Math.random() * Math.PI * 2; this.velocity = 0.05; this.distanceFromCenter = Math.random() * 50 + 100; this.lastMouse = {x: x, y: y}; this.draw = function(lastPoint) { ctx.beginPath(); ctx.strokeStyle = this.color; ctx.lineWidth = this.radius; ctx.moveTo(lastPoint.x, lastPoint.y); ctx.lineTo(this.x, this.y); ctx.stroke(); ctx.closePath(); } this.update = function() { // 记录上一帧的鼠标位置 this.lastMouse.x += (mouse.x - this.lastMouse.x) * 0.05; this.lastMouse.y += (mouse.y - this.lastMouse.y) * 0.05; // 运动轨迹 this.radians += this.velocity; this.x = this.lastMouse.x + Math.cos(this.radians) * this.distanceFromCenter; this.y = this.lastMouse.y + Math.sin(this.radians) * this.distanceFromCenter; this.draw(this.lastMouse); } } function init() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; for (var i = 0; i < 50; i++) { var radius = Math.random() * 3 + 1; var color = "rgba(255, 255, 255, 0.5)"; particles.push(new Particle(canvas.width / 2, canvas.height / 2, radius, color)); } } function animate() { requestAnimationFrame(animate); ctx.fillStyle = "rgba(0, 0, 0, 0.1)"; ctx.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < particles.length; i++) { particles[i].update(); } } init(); animate(); ``` 这段代码创建了一个画布，并且在鼠标移动时跟随鼠标移动的粒子效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值