使用JS实现气泡跟随鼠标移动的动画效果
程序员文章站
2022-04-28 23:52:18
气泡跟随鼠标移动,并在每次点击时产生不同的变化
效果如下
&...
气泡跟随鼠标移动,并在每次点击时产生不同的变化
效果如下
<!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实现气泡跟随鼠标移动的动画效果 ,希望对大家有所帮助!
上一篇: 详解Vue.js Mixins 混入使用
下一篇: JavaScript实现换肤功能
推荐阅读