使用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 相关文章推荐
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
js如何取消事件冒泡
Sep 23 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
javascript 闭包详解
Feb 15 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 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
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
理解JS绑定事件
2016/01/19 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
vue实现点击追加选中样式效果
2019/11/01 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
python 图像平移和旋转的实例
2019/01/10 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
Python项目打包成二进制的方法
2020/12/30 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
行政文员岗位职责
2015/02/04 职场文书
争先创优个人总结
2015/03/04 职场文书
党支部季度考核意见
2015/06/02 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle