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

动态背景线条，鼠标移动可以吸附，可以添加配置，代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>粒子线条canvas效果</title><style>#J_dotLine {display: block;margin: 0 auto;}</style>
</head><body><canvas id="J_dotLine"></canvas><script>; (function (window) {function Dotline(option) {this.opt = this.extend({dom: 'J_dotLine',//画布idcw: 1000,//画布宽ch: 500,//画布高ds: 100,//点的个数r: 0.5,//圆点半径cl: '#000',//颜色dis: 100//触发连线的距离}, option);this.c = document.getElementById(this.opt.dom);//canvas元素idthis.ctx = this.c.getContext('2d');this.c.width = this.opt.cw;//canvas宽this.c.height = this.opt.ch;//canvas高this.dotSum = this.opt.ds;//点的数量this.radius = this.opt.r;//圆点的半径this.disMax = this.opt.dis * this.opt.dis;//点与点触发连线的间距this.color = this.color2rgb(this.opt.cl);//设置粒子线颜色this.dots = [];//requestAnimationFrame控制canvas动画var RAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60);};var _self = this;//增加鼠标效果var mousedot = { x: null, y: null, label: 'mouse' };this.c.onmousemove = function (e) {var e = e || window.event;mousedot.x = e.clientX - _self.c.offsetLeft;mousedot.y = e.clientY - _self.c.offsetTop;};this.c.onmouseout = function (e) {mousedot.x = null;mousedot.y = null;}//控制动画this.animate = function () {_self.ctx.clearRect(0, 0, _self.c.width, _self.c.height);_self.drawLine([mousedot].concat(_self.dots));RAF(_self.animate);};}//合并配置项，es6直接使用obj.assign();Dotline.prototype.extend = function (o, e) {for (var key in e) {if (e[key]) {o[key] = e[key]}}return o;};Dotline.prototype.color2rgb = function (colorStr) {var red = null,green = null,blue = null;var cstr = colorStr.toLowerCase();//变小写var cReg = /^#[0-9a-fA-F]{3,6}$/;//确定是16进制颜色码if (cstr && cReg.test(cstr)) {if (cstr.length == 4) {var cstrnew = '#';for (var i = 1; i < 4; i++) {cstrnew += cstr.slice(i, i + 1).concat(cstr.slice(i, i + 1));}cstr = cstrnew;}red = parseInt('0x' + cstr.slice(1, 3));green = parseInt('0x' + cstr.slice(3, 5));blue = parseInt('0x' + cstr.slice(5, 7));}return red + ',' + green + ',' + blue;}//画点Dotline.prototype.addDots = function () {var dot;for (var i = 0; i < this.dotSum; i++) {//参数dot = {x: Math.floor(Math.random() * this.c.width) - this.radius,y: Math.floor(Math.random() * this.c.height) - this.radius,ax: (Math.random() * 2 - 1) / 1.5,ay: (Math.random() * 2 - 1) / 1.5}this.dots.push(dot);}};//点运动Dotline.prototype.move = function (dot) {dot.x += dot.ax;dot.y += dot.ay;//点碰到边缘返回dot.ax *= (dot.x > (this.c.width - this.radius) || dot.x < this.radius) ? -1 : 1;dot.ay *= (dot.y > (this.c.height - this.radius) || dot.y < this.radius) ? -1 : 1;//绘制点this.ctx.beginPath();this.ctx.arc(dot.x, dot.y, this.radius, 0, Math.PI * 2, true);this.ctx.stroke();};//点之间画线Dotline.prototype.drawLine = function (dots) {var nowDot;var _that = this;//自己的思路：遍历两次所有的点，比较点之间的距离，函数的触发放在animate里this.dots.forEach(function (dot) {_that.move(dot);for (var j = 0; j < dots.length; j++) {nowDot = dots[j];if (nowDot === dot || nowDot.x === null || nowDot.y === null) continue;//continue跳出当前循环开始新的循环var dx = dot.x - nowDot.x,//别的点坐标减当前点坐标dy = dot.y - nowDot.y;var dc = dx * dx + dy * dy;if (Math.sqrt(dc) > Math.sqrt(_that.disMax)) continue;// 如果是鼠标，则让粒子向鼠标的位置移动if (nowDot.label && Math.sqrt(dc) > Math.sqrt(_that.disMax) / 2) {dot.x -= dx * 0.02;dot.y -= dy * 0.02;}var ratio;ratio = (_that.disMax - dc) / _that.disMax;_that.ctx.beginPath();_that.ctx.lineWidth = ratio / 2;_that.ctx.strokeStyle = 'rgba(' + _that.color + ',' + parseFloat(ratio + 0.2).toFixed(1) + ')';_that.ctx.moveTo(dot.x, dot.y);_that.ctx.lineTo(nowDot.x, nowDot.y);_that.ctx.stroke();//不描边看不出效果//dots.splice(dots.indexOf(dot), 1);}});};//开始动画Dotline.prototype.start = function () {var _that = this;this.addDots();setTimeout(function () {_that.animate();}, 100);}window.Dotline = Dotline;}(window));//调用window.onload = function () {var dotline = new Dotline({dom: 'J_dotLine',//画布idcw: 1000,//画布宽ch: 500,//画布高ds: 100,//点的个数r: 0.5,//圆点半径cl: '#fff',//粒子线颜色dis: 100//触发连线的距离}).start();}</script>
</body></html>

vue，react写法，类分装：
创建一个dotline.js

class Dotline {constructor(option) {this.opt = this.extend({dom: 'J_dotLine',//画布idcw: 1000,//画布宽ch: 500,//画布高ds: 100,//点的个数r: 0.5,//圆点半径cl: '#000',//颜色dis: 100//触发连线的距离}, option);this.c = document.getElementById(this.opt.dom);//canvas元素idthis.ctx = this.c.getContext('2d');this.c.width = this.opt.cw;//canvas宽this.c.height = this.opt.ch;//canvas高this.dotSum = this.opt.ds;//点的数量this.radius = this.opt.r;//圆点的半径this.disMax = this.opt.dis * this.opt.dis;//点与点触发连线的间距this.color = this.color2rgb(this.opt.cl);//设置粒子线颜色this.dots = [];//requestAnimationFrame控制canvas动画var RAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60);};var _self = this;//增加鼠标效果var mousedot = { x: null, y: null, label: 'mouse' };this.c.onmousemove = function (e) {var e = e || window.event;mousedot.x = e.clientX - _self.c.offsetLeft;mousedot.y = e.clientY - _self.c.offsetTop;};this.c.onmouseout = function (e) {mousedot.x = null;mousedot.y = null;}//控制动画this.animate = function () {_self.ctx.clearRect(0, 0, _self.c.width, _self.c.height);_self.drawLine([mousedot].concat(_self.dots));RAF(_self.animate);};}//合并配置项，es6直接使用obj.assign();extend(o, e) {for (var key in e) {if (e[key]) {o[key] = e[key]}}return o;}//设置线条颜色color2rgb(colorStr) {var red = null,green = null,blue = null;var cstr = colorStr.toLowerCase();//变小写var cReg = /^#[0-9a-fA-F]{3,6}$/;//确定是16进制颜色码if (cstr && cReg.test(cstr)) {if (cstr.length == 4) {var cstrnew = '#';for (var i = 1; i < 4; i++) {cstrnew += cstr.slice(i, i + 1).concat(cstr.slice(i, i + 1));}cstr = cstrnew;}red = parseInt('0x' + cstr.slice(1, 3));green = parseInt('0x' + cstr.slice(3, 5));blue = parseInt('0x' + cstr.slice(5, 7));}return red + ',' + green + ',' + blue;}//画点addDots() {var dot;for (var i = 0; i < this.dotSum; i++) {//参数dot = {x: Math.floor(Math.random() * this.c.width) - this.radius,y: Math.floor(Math.random() * this.c.height) - this.radius,ax: (Math.random() * 2 - 1) / 1.5,ay: (Math.random() * 2 - 1) / 1.5}this.dots.push(dot);}}//点运动move(dot) {dot.x += dot.ax;dot.y += dot.ay;//点碰到边缘返回dot.ax *= (dot.x > (this.c.width - this.radius) || dot.x < this.radius) ? -1 : 1;dot.ay *= (dot.y > (this.c.height - this.radius) || dot.y < this.radius) ? -1 : 1;//绘制点this.ctx.beginPath();this.ctx.arc(dot.x, dot.y, this.radius, 0, Math.PI * 2, true);this.ctx.stroke();}//点之间画线drawLine(dots) {var nowDot;var _that = this;//自己的思路：遍历两次所有的点，比较点之间的距离，函数的触发放在animate里this.dots.forEach(function (dot) {_that.move(dot);for (var j = 0; j < dots.length; j++) {nowDot = dots[j];if (nowDot === dot || nowDot.x === null || nowDot.y === null) continue;//continue跳出当前循环开始新的循环var dx = dot.x - nowDot.x,//别的点坐标减当前点坐标dy = dot.y - nowDot.y;var dc = dx * dx + dy * dy;if (Math.sqrt(dc) > Math.sqrt(_that.disMax)) continue;// 如果是鼠标，则让粒子向鼠标的位置移动if (nowDot.label && Math.sqrt(dc) > Math.sqrt(_that.disMax) / 2) {dot.x -= dx * 0.02;dot.y -= dy * 0.02;}var ratio;ratio = (_that.disMax - dc) / _that.disMax;_that.ctx.beginPath();_that.ctx.lineWidth = ratio / 2;_that.ctx.strokeStyle = 'rgba(' + _that.color + ',' + parseFloat(ratio + 0.2).toFixed(1) + ')';_that.ctx.moveTo(dot.x, dot.y);_that.ctx.lineTo(nowDot.x, nowDot.y);_that.ctx.stroke();//不描边看不出效果//dots.splice(dots.indexOf(dot), 1);}});}//开始动画start() {var _that = this;this.addDots();setTimeout(function () {_that.animate();}, 100);}
}export default Dotline;

调用方法：
html：

<canvas id="J_dotLine"></canvas>

js:

import Dotline from "./dotline.js";const option = {dom: 'J_dotLine',//画布idcw: 1000,//画布宽ch: 500,//画布高ds: 250,//点的个数r: 3,//圆点半径cl: '#061eb3',//粒子线颜色dis: 120//触发连线的距离}
const dotline = new Dotline(option).start();

网站动态背景线条跟随鼠标移动，吸附鼠标效果相关推荐

网站动态背景线条跟随鼠标移动，吸附鼠标效果代码
经常看到有些SEO博客网站上有这种用动态线条作为网站背景的效果,当鼠标移动上去的时候会出现线条吸附在鼠标周围的特效,鼠标离开的时候线条就自动散开.这个效果之前在我的博客上也有加过,后来网站改版就没有继 ...
JS特效——鼠标跟随特效——动态背景线条跟随鼠标移动
<script>!function(){function n(n,e,t){return n.getAttribute(e ...
博客样式(动态背景线条跟随鼠标移动)
代码(将代码添加至页脚html板块): 1  2 3 <script> 4 5 !function(){ 6 7 func ...
一款好看，有科技感的动态背景线条动态效果代码
一款好看,有科技感的动态背景线条动态效果代码 Lan 2020-05-11 14:41 308 人阅读 0 条评论背景动态js代码,效果图可见本站代码源于网络,如有问题请联系Vast@ ...
html动态跟随鼠标效果,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化效果如下简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
博客园添加鼠标粒子吸附特效
本文从以下三个方面, 阐述在博客园添加鼠标粒子吸附特效: 一. 效果展示二. 权限申请三. 设置步骤一. 效果展示在博客园的页面, 出现鼠标粒子吸附的特效, 如图所示: 二. 权限申请点击博 ...
html5随鼠标移动动画,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化效果如下简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
css3魔方鼠标怎么用,CSS3之3D魔方鼠标控制酷炫效果
前面文章有制作水晶魔方,这次我们升级一下它的功能,通过鼠标控制魔方旋转. 大家先看效果这酷炫的效果,你怎么看? 这次效果,咱们需要用JS实现.主要是监听鼠标事件,计算鼠标滑动距离,改变魔方的rota ...
根据坐标点鼠标不移动_CAD移动鼠标时，鼠标右下角有坐标提示，怎么取消？...
好课推荐: 1.CAD2014:点击查看2.室内&全屋:点击查看3.CAD2019:点击查看4.CAD2018:点击查看5.[bim]revit:点击查看6.室内手绘:点击查看7.CAD三维: ...

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

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

网站动态背景线条跟随鼠标移动，吸附鼠标效果相关推荐

最新文章

热门文章