使用JS实现气泡跟随鼠标移动的动画效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了使用JS实现气泡跟随鼠标移动的动画效果,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2624字,纯文字阅读大概需要4分钟。
内容图文
![使用JS实现气泡跟随鼠标移动的动画效果](/upload/InfoBanner/zyjiaocheng/341/954678da8c0046a5907d1f2063013306.jpg)
气泡跟随鼠标移动,并在每次点击时产生不同的变化
效果如下
<!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实现气泡跟随鼠标移动的动画效果 ,希望对大家有所帮助!
内容总结
以上是互联网集市为您收集整理的使用JS实现气泡跟随鼠标移动的动画效果全部内容,希望文章能够帮你解决使用JS实现气泡跟随鼠标移动的动画效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。