介绍 JS是什么 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
,& lt; head>
,& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=utf-8",/比;
,& lt; title>
简单的气泡效果
& lt;/title>
,& lt; style 类型=拔谋?css"比;
身体,{background - color: # 000000;保证金:0 px;溢出:隐藏}
,& lt;/style>
,& lt;/head>
,& lt; body>
,& lt;/body>
& lt;/html>
& lt; script>
,var canvas =, document.createElement(& # 39;帆布# 39;),=,,context canvas.getContext (& # 39; 2 d # 39;),=,,windowW window.screen.width ,=,,windowH window.screen.height ,
Mx,
,我,=,paused 真实;=,suzu [];=,booms [];=,boomks [];
,开始();=,canvas.onmousemove 函数(e), {
,var loc =, canvasMove (e.clientY e.clientX也);=,,Mx loc.x;=,My loc.y
,};=,canvas.onmousedown 函数(),{
,creatarry (Mx,,我的);
paused =, !停了下来
,};
,function creatarry (a, b), {
,for (var 小姐:=,0;,小姐:& lt;, 40,, + + i), {
,繁荣[我]=,{
,x:,
y:大敌;b,
,重力:0.3,
,speedX: math . random(), *, 20,安康;10,
,快速:math . random(), *, 15,安康;7,
,半径:math . random(), *, 15日
,颜色:math . random(), *, 360年,
,apc: 0.6
,};
[我],boomks.push(繁荣);
,if (boomks.length 祝辞,300),{
,boomks.shift ()
,};
,console.log (boomks)
,}
,};
,function loop1 (), {
,boomks.forEach(函数(圆),{
,context.beginPath ();
,context.arc (circle.x, circle.y,, circle.radius,, 0,, Math.PI *, 2,假);=,context.fillStyle & # 39; hsla (& # 39;, +, circle.color +, & # 39;, 100%, 60%, & # 39;, +, circle.apc +, & # 39;) & # 39;;
,context.fill ();
,movecircles(圆)
,})
,}
,function movecircles(圆),{
+=,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 开始(),{
,document.body.appendChild(画布);=,,canvas.width windowW;=,,canvas.height windowH;
25,setInterval (,,)
,}
方,function (), {
,context.clearRect (0, 0, canvas.width,, canvas.height);
,loop1 ();
,循环()
,}
,function 循环(),{
,var circle =, new createCircle (Mx,,我的);
,suzu.push(圆);
,for (小姐:=,0;,小姐:& lt;, suzu.length;,我+ +),{
,var ss =, suzu[我];
,ss.render(上下文);
,ss.update ()
,}
,if (suzu.length 祝辞,1000),{
,suzu.shift ()
,}
,}
,function createCircle (x, y), {=,this.x x;
y=, this.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 函数(c), {
,c.beginPath ();
,c.arc (this.x, this.y,, this.radius,, 0,, Math.PI *, 2,,真的);=,c.fillStyle & # 39; hsla (& # 39;, +, this.color +, & # 39;, 100%, 60%, & # 39;, +, this.apc +, & # 39;) & # 39;;
,c.fill ()
,};=,this.update 函数(),{
,if (!停了下来),{
+=,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 -=,
,}
,}}
null
小编给大家分享一下如何使用JS实现气泡跟随鼠标移动的动画效果,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。
代码如下
