使用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 相关文章推荐
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
npm的lock机制解析
Jun 20 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
javascript动画浅析
2012/08/30 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
深入探究node之Transform
2017/07/20 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
Python I/O与进程的详细讲解
2019/03/08 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
Linux的主要特性
2014/10/06 面试题
学年末自我鉴定
2014/01/21 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
小学班主任研修日志
2015/11/13 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
利用python调用摄像头的实例分析
2021/06/07 Python