html5随鼠标移动动画,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化
效果如下
简单的气泡效果
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实现气泡跟随鼠标移动的动画效果 ,希望对大家有所帮助!
html5随鼠标移动动画,使用JS实现气泡跟随鼠标移动的动画效果相关推荐
- html动态跟随鼠标效果,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化 效果如下 简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
- 彩色圆点气泡跟随 鼠标光标动画特效
彩色圆点气泡跟随 鼠标光标动画特效 效果图如下: 泡泡会根据鼠标的移动在鼠标下方会生成泡泡 然后缓缓上升. 可以父子以下代码看一下实际效果. 1.下面是HTML结构 HTML结构很简单,主要是靠css ...
- 鼠标跟随案例:用js实现盒子跟随鼠标移动
需求:当我们鼠标放在div身上时,它的孩子p标签能够显示,而且跟着鼠标一起移动, 思路: ● 想让p标签跟着鼠标一起移动:运用鼠标移动事件,还需要p标签定位:(mousemove:鼠标移动事件) ● ...
- JS实现眼睛跟随鼠标特效
效果展示 JS使用眼睛跟随特效 代码展示 实现原理见代码注释 <div class="face"><div class="eye">&l ...
- js之div跟随鼠标移动
一.主要用到的相关属性: 1)onmouseover 2)clientX.clientY 3)pageX.pageY 4)document.body.scrollTop 5)document.docu ...
- 跟随鼠标走的文字的html代码,跟随鼠标走的文字的HTML代码
跟随鼠标走的文字的HTML代码 跟着鼠标走的文字 visibility:visible; top:-50px; font-size:12pt; font-family:隶书; color: 00001 ...
- python物体跟着鼠标走_用Python写一个跟随鼠标运动的自定义窗口
背景:因为项目需要,要开发一个在PC上运行的应用程序,生成一个跟随鼠标运动的窗口,并且监听鼠标的点击事件,并在窗口上做相应的显示. 平台:Win7 64位 + Python27 64位 支持库:PyH ...
- HTML+CSS+JS案例展示(跟随鼠标移动的小人)
参考来源: JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili ...
- 鼠标点击某处时可以让小精灵移动到鼠标点击的地方, 让精灵跟随鼠标移动
鼠标点击页面某处的时候可以让小精灵移动到该处 css代码: <style>html,body {height: 100%;width: 100%;background-color: bla ...
最新文章
- 分布式锁能解决 mysql死锁吗_mysql死锁问题分析
- 学成在线--22.课程营销
- Android连接相机WiFi,安卓手机使用佳能相机机身wifi传输拍摄的操作
- java定义一个矩阵的类_java写入一个矩阵,如何编程求该矩阵的秩
- Web前端笔记-使用Webpack调用echarts画图
- android 技能标签功能_android专业技能总结.doc
- 初识python你应该知道的6个知识点
- bzoj 1124: [POI2008]枪战Maf(贪心)
- 信息计算机课评课,关于信息技术的评课稿
- northwind数据库介绍
- Kotlin-三目表达式Kotlin版
- macbook重装系统 选择方案_Mac重装系统详解,教你mac抹掉磁盘重装系统!
- MacBook苹果系统下安装Windows XP双系统多分区问题解决
- openssl的微缩图计算
- 职场社交赛道上,脉脉靠什么弯道超车
- abs210桥堆的芯片多大,ASEMI-ABS210贴片整流桥
- 数据结构入门----赫夫曼Huffman树及其应用
- opa学习1--开发环境搭建
- 鸿蒙系统怎么安装 google play
- slim android7 nexus7,新Nexus 7详细拆解:拆装不难,外壳脆弱