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

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

效果如下

简单的气泡效果

body{background-color:#000000;margin:0px;overflow:hidden}

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

}

} }

总结

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