html5随鼠标移动动画,使用JS实现气泡跟随鼠标移动的动画效果
发布日期:2022-02-21 12:50:41 浏览次数:36 分类:技术文章

本文共 2476 字,大约阅读时间需要 8 分钟。

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

效果如下

简单的气泡效果

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实现气泡跟随鼠标移动的动画效果 ,希望对大家有所帮助! ad51e517755f8fd6a7ec83ced4ecfaf3.png

转载地址:https://blog.csdn.net/weixin_33958381/article/details/117888470 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:三级目录怎么做html,三级目录.html
下一篇:html+table+row+col,html – css位置:粘不使用display:table-row-group

发表评论

最新留言

第一次来,支持一个
[***.219.124.196]2024年03月25日 13时11分18秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

banner 获取当前指示物_学会这些技巧,让你的banner脱颖而出 2019-04-21
线上banner什么意思_广交会线上直播怎么做 2019-04-21
获取默认值_TarsGo 服务获取自定义模版(配置)值 2019-04-21
启动rocketmq_rocketmq 部署启动指南-Docker 版 2019-04-21
热敏打印_热敏打印机需要碳带吗? 2019-04-21
点击屏幕触发_Flutter 中文文档:点击、拖动和其他手势 2019-04-21
怎么解决_壁挂炉出现e2是怎么回事?一般怎么解决? 2019-04-21
内容换行_内容换行或分段不会影响到SEO优化和搜索引擎收录抓取 2019-04-21
图形化分析工具_酷炫!一款 Go 语言实现的实时图形化分析的性能测试工具 2019-04-21
发动机冷启动和热启动的区别_柴油发动机冬季启动3招小窍门 2019-04-21
怎样将图片弄成白底的_做跨境电商想拍出爆款产品图片,我只用这五招 2019-04-21
苹果手机如何分享安装包_苹果手机显示 Apple ID 被停用该如何恢复? 2019-04-21
python采用单例模式游戏_Python单例模式(Singleton)的N种实现 2019-04-21
python安装第三方库方法_Python安装第三方库的3种方法 2019-04-21
因果信号的傅里叶变换_常用信号的傅里叶变换对 2019-04-21
java中random方法取值范围_Java Random.nextInt()方法,随机产生某个范围内的整数 2019-04-21
笔记本vm系统的分辨率不好调整_30天自制操作系统 2019-04-21
eclipse考试系统app_2019电工(高级)在线免费模拟考试系统及模拟题库App九 2019-04-21
mysql keepalived 主从_MySQL 5.6通过Keepalived+互为主从实现高可用架构 2019-04-21
mysql 表中添加数据类型_表的增删改查+mysql的数据类型 2019-04-21