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


Posted in Javascript onSeptember 16, 2017

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

效果如下

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

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>
简单的气泡效果
</title>
 <style type="text/css">
 body{background-color:#000000;margin:0px;overflow:hidden}
 </style>
 </head>
 <body>
 </body>
</html>
<script>
 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
 }
 } }
 </script>

总结

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

Javascript 相关文章推荐
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
EasyUI创建人员树的实例代码
Sep 15 #Javascript
webpack构建react多页面应用详解
Sep 15 #Javascript
详解Vue中一种简易路由传参办法
Sep 15 #Javascript
JavaScript实现换肤功能
Sep 15 #Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 #jQuery
详解Vue.js Mixins 混入使用
Sep 15 #Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 #Javascript
You might like
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
Function.prototype.bind用法示例
2013/09/16 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
python3实现表白神器
2019/04/09 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
社会实践的活动方案
2014/08/22 职场文书
聘任通知书
2015/09/21 职场文书