cari

Rumah >hujung hadapan web >tutorial js >使用JS实现气泡跟随鼠标移动动画特效实例详解

使用JS实现气泡跟随鼠标移动动画特效实例详解

巴扎黑
巴扎黑asal
2017-09-18 09:41:512021semak imbas

气泡跟随鼠标移动，并在每次点击时产生不同的变化，效果非常迷人，下面小编给大家带来了，基于js实现的气泡效果实例代码，需要的朋友参考下吧

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

效果如下


<!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>

Atas ialah kandungan terperinci 使用JS实现气泡跟随鼠标移动动画特效实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript构造函数中this和return详细介绍Artikel seterusnya：如何防止库函数无意间错误修改

Artikel berkaitan

Lihat lagi