html动态跟随鼠标效果,使用JS实现气泡跟随鼠标移动的动画效果

气泡跟随鼠标移动,并在每次点击时产生不同的变化

效果如下

fe0be338064a3ad1a00306ce900e8eb0.png

简单的气泡效果

body{background-color:#000000;margin:0px;overflow:hidden}

var canvas = document.createElement('canvas'),

context = canvas.getContext('2d'),

windowW = window.screen.width ,

windowH = window.screen.height ,

Mx,

My,

paused = true;

suzu = [];

booms = [];

boomks = [];

start();

canvas.onmousemove = function(e) {

var loc = canvasMove(e.clientX, e.clientY);

Mx = loc.x;

My = loc.y

};

canvas.onmousedown = function() {

creatarry(Mx, My);

paused = !paused

};

function creatarry(a, b) {

for (var i = 0; i < 40; ++i) {

booms[i] = {

x: a,

y: b,

gravity: 0.3,

speedX: Math.random() * 20 - 10,

speedY: Math.random() * 15 - 7,

radius: Math.random() * 15,

color: Math.random() * 360,

apc: 0.6

};

boomks.push(booms[i]);

if (boomks.length > 300) {

boomks.shift()

};

console.log(boomks)

}

};

function loop1() {

boomks.forEach(function(circle) {

context.beginPath();

context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2, false);

context.fillStyle = 'hsla(' + circle.color + ',100%,60%,' + circle.apc + ')';

context.fill();

movecircles(circle)

})

}

function movecircles(circle) {

circle.x += circle.speedX;

circle.speedY += circle.gravity;

circle.y += circle.speedY;

circle.apc -= 0.008

}

function canvasMove(x, y) {

var bbox = canvas.getBoundingClientRect();

return {

x: x - bbox.left * (canvas.width / bbox.width),

y: y - bbox.top * (canvas.height / bbox.height)

}

};

function start() {

document.body.appendChild(canvas);

canvas.width = windowW;

canvas.height = windowH;

setInterval(fang, 25)

}

function fang() {

context.clearRect(0, 0, canvas.width, canvas.height);

loop1();

loop()

}

function loop() {

var circle = new createCircle(Mx, My);

suzu.push(circle);

for (i = 0; i < suzu.length; i++) {

var ss = suzu[i];

ss.render(context);

ss.update()

}

if (suzu.length > 1000) {

suzu.shift()

}

}

function createCircle(x, y) {

this.x = x;

this.y = y;

this.color = Math.random() * 360;

this.radius = Math.random() * 25;

this.xVel = Math.random() * 5 - 2;

this.apc = 0.6;

this.gravity = 0.07;

this.yVel = Math.random() * 10 - 3;

this.render = function(c) {

c.beginPath();

c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);

c.fillStyle = 'hsla(' + this.color + ',100%,60%,' + this.apc + ')';

c.fill()

};

this.update = function() {

if (!paused) {

this.yVel += this.gravity;

this.y += this.yVel

} else {

this.y -= 5

}

this.x += this.xVel;

this.apc -= 0.01;

if (this.radius > 1) {

this.radius -= 0.4

}

} }

总结

以上所述是小编给大家带来了使用JS实现气泡跟随鼠标移动的动画效果 ,希望对大家有所帮助!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/550250.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

raspberry ssh 允许 root 登录

参考链接 csdn 转载于:https://www.cnblogs.com/eat-too-much/p/11153213.html

python开发转行做数据分析_转行学IT,Java、Python、大数据选择学哪个发展好?

对薪资不满意、担心自己以后不好找工作&#xff0c;不少人都会选择参加培训&#xff0c;转行IT行业。当然很多想要转行IT的人&#xff0c;都会犹豫选择哪门编程语言学习比较好&#xff0c;Python、Java、大数据作为比较热门行业技术&#xff0c;不少人都很疑惑转行学Java、Pyth…

html显示线条流动效果,css3实现线条流动效果

1实现原理&#xff1a;通过animation中的clip实现对div的不断切割首先要弄懂clip的含义&#xff0c;四个参数分别是上右下左&#xff0c;以上和左为标准。clip使用的前提是元素绝对定位。本来想实现这样效果看起来是需要3个div&#xff0c;但是根据前人的经验&#xff0c;使用b…

mysql 解析sql文件

简介 如何使用 本地mysql 解析sql文件 方法 参考链接 cnblogs 看三.创建数据库 参考链接 runoob 看选择数据库 参考链接 cnblogs 看往mysql中导入SQL文件 转载于:https://www.cnblogs.com/eat-too-much/p/11153383.html

html的数据类型有哪些,数据库数据类型有哪些

MySQL中定义数据字段的类型对你数据库的优化是非常重要的。MySQL支持多种类型&#xff0c;大致可以分为三类&#xff1a;数值、日期/时间和字符串(字符)类型。推荐教程&#xff1a;MySQL入门视频教程一、数值类型MySQL支持所有标准SQL数值数据类型。这些类型包括严格数值数据类…

2021 河南 高考成绩查询,2021河南高考成绩查询入口

随着高考结束&#xff0c;高考阅卷工作陆续启动&#xff0c;已有多个省份公布了查分时间&#xff0c;那我们知道河南高考时间是什么时候嘛?下面是小编整理2021河南高考成绩查询入口_2021河南高考查分时间公布&#xff0c;仅供参考&#xff0c;希望能够帮助到大家。2021河南高考…

人脸检测算法_腾讯已开源高精度人脸检测算法DSFD

腾讯提出一种高精度双分支人脸检测器DSFD并开源。该算法曾在全球两大权威人脸检测数据集WIDERFACE和FDDB上均取得了第一。任务介绍人脸检测算法是在图像上检测出人脸的位置(通常以矩形框形式输出)&#xff0c;是人脸配准、人脸属性识别、人脸核身、人脸检索等技术的基础。随着人…

java之struts2之数据检验

1.使用struts2时&#xff0c;有时候需要对数据进行相关的验证。如果对数据的要求比较严格&#xff0c;或对安全性要求比较高时&#xff0c;前端 js 验证还不够&#xff0c; 需要在后端再进行一次验证&#xff0c;保证数据的安全性。 2.struts2提供了两种机制来进行后端的数据验…

sdk开发包如何使用_SDK如何使能行业?华为昇腾要用软件充分释放硬件性能

谈及落地&#xff0c;软件永远是激发硬件性能的核心。自AI出现&#xff0c;围绕传统产业“智能化转型”的探讨就一直没有停下。而随着“新基建”口号的喊出&#xff0c;工业制造等场景的智能化进程更是被加上了助推器。以智能制造为例&#xff0c;依据Markets报告所预计的&…

vue入门:(组件)

模板&#xff1a;&#xff08;template&#xff09;模板声明了数据和最终展现给用户的DOM之间的映射关系。初始数据&#xff1a;&#xff08;data&#xff09;一个组件的初始数据状态。对于可复用的组件来说&#xff0c;通常是私有的状态。接收外部参数&#xff1a;&#xff08…

鹿邑2021高考成绩查询,鹿邑中考成绩查询2021

2021鹿邑中考成绩查询时间方法&#xff1a;91中考网消息&#xff1a;2021年鹿邑中考即将开始&#xff0c;在中考后&#xff0c;广大考生最关心的无疑就是中考成绩查询方法、鹿邑中考成绩什么时候公布&#xff1f;&#xff0c;根据往年经验&#xff0c;小编收集整理了2021鹿邑中…

excel删除行 uipath_学会这8个Excel神技巧,轻松告别零基础!

无论你是个学生还是职场中人&#xff0c;谁不知道Excel呢&#xff1f;尤其是办公一族&#xff0c;总是不可避免会使用到Excel。下面小电就向大家介绍8个神技巧&#xff0c;让你的工作量大大减少&#xff01;那什么技巧有如此威力呢&#xff1f;想必有些大家都用过的&#xff0c…

IIS7.5下的asp.net网站不能连接数据库

今天报了一错就是"找不到Table[0]" 感觉是没有连到数据库。 处理方法&#xff1a;把连接字符串由windows身份验证改成 sqlserver验证就好了 我不知道为什么这么做&#xff01;等待高手给我解答转载于:https://www.cnblogs.com/master-zhu/archive/2010/07/20/17810…

jq在html中添加dom元素,使用jQuery添加DOM元素的最佳方法

所以我已经看到了三种向页面添加html/DOM元素的方法.我很好奇他们每个人的利弊是什么.1 - 传统的JavaScript我相信直接的JS方法是通过构造每个元素,设置属性,然后附加它们.例:var myRow document.createElement("tr");myRow.class "myClass";var firstTD…

qt 5编程入门(第2版)_《C++并发编程实战第2版》第六章:设计基于锁的并发数据结构(1/3)...

本章主要内容设计并发数据结构的含义设计指南并发数据结构的示例实现在上一章中我们了解了底层原子操作和内存模型。本章我们先把底层的细节放一放(尽管在第7章我们将需要它们)&#xff0c;探讨一下数据结构。为编程问题选择数据结构可能是整个解决方案的关键部分&#xff0c;并…

数据I/O流

文件输出流的应用。定义如下字符串&#xff1a;String str “12345abcdef#%&*软件工程”;编写程序将该字符串写入文件”data.txt”。package homework;import java.io.*;public class IO { public static void main(String[] args) throws IOException{ // TODO Auto-gene…

转学到斯坦福大学计算机专业,斯坦福大学转学申请条件有哪些?

斯坦福大学转学申请条件有哪些&#xff1f;据托普仕小编了解&#xff0c;斯坦福大学(Stanford University&#xff0c;简称Stanford)位于美国加州旧金山湾区南部的帕罗奥多市(PaloAlto)境内&#xff0c;临近世界著名高科技园区硅谷&#xff0c;是世界著名私立研究型大学。斯坦福…

计算机应用技术面试的礼仪和技巧,远程复试下,这些面试礼仪一定要注意!

已有高校官宣考研复试采取线上面试的形式&#xff0c;那么如何在远程面试中给导师留下礼仪得体的好印象呢&#xff1f;帮帮为大家准整理了线上复试礼仪&#xff0c;快来了解下吧~面试前期准备一、面试前做好面试设备技术检查。如果采取线上复试的形式&#xff0c;稳定的网络环境…

在网格中查找一个点的领域点

简介 在网格中查找这个点的领域节点。 代码 #include <iostream> #include <OpenMesh/Core/IO/MeshIO.hh> #include <OpenMesh/Core/Mesh/TriMesh_ArrayKernelT.hh> using namespace std; typedef OpenMesh::TriMesh_ArrayKernelT<> MyMesh; int main(…

查找一个顶点的一层领域边

简介 查找一个顶点的一层领域边 代码一 这个代码使用了太多的auto&#xff0c;其实不利于阅读&#xff0c;代码二&#xff0c;把auto更改了。 #include <iostream> #include <vector> // -------------------- OpenMesh using namespace std; #include <OpenMes…