Home > Article > Web Front-end > Detailed example of using JS to implement bubbles following mouse movement animation special effects

Detailed example of using JS to implement bubbles following mouse movement animation special effects

巴扎黑Original: 2017-09-18 09:41:511974browse

The bubbles follow the movement of the mouse and produce different changes every time it is clicked. The effect is very charming. The editor below brings you the example code of the bubble effect based on js. Friends who need it can refer to it

The bubbles follow the movement of the mouse and produce different changes with each click

The effect is as follows

<!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(&#39;canvas&#39;),
 context = canvas.getContext(&#39;2d&#39;),
 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 = &#39;hsla(&#39; + circle.color + &#39;,100%,60%,&#39; + circle.apc + &#39;)&#39;;
 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 = &#39;hsla(&#39; + this.color + &#39;,100%,60%,&#39; + this.apc + &#39;)&#39;;
 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>

The above is the detailed content of Detailed example of using JS to implement bubbles following mouse movement animation special effects. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to this and return in JavaScript constructorNext article：Detailed introduction to this and return in JavaScript constructor

See more

Detailed example of using JS to implement bubbles following mouse movement animation special effects

Related articles