效果演示
JS文件代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
function clickEffect() { let balls = []; let longPressed = false; let longPress; let multiplier = 0; let width, height; let origin; let normal; let ctx; const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"]; const canvas = document.createElement("canvas"); document.body.appendChild(canvas); canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;"); const pointer = document.createElement("span"); pointer.classList.add("pointer"); document.body.appendChild(pointer); if (canvas.getContext && window.addEventListener) { ctx = canvas.getContext("2d"); updateSize(); window.addEventListener('resize', updateSize, false); loop(); window.addEventListener("mousedown", function(e) { pushBalls(randBetween(10, 20), e.clientX, e.clientY); document.body.classList.add("is-pressed"); longPress = setTimeout(function() { document.body.classList.add("is-longpress"); longPressed = true; }, 500); }, false); window.addEventListener("mouseup", function(e) { clearInterval(longPress); if (longPressed == true) { document.body.classList.remove("is-longpress"); pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY); longPressed = false; } document.body.classList.remove("is-pressed"); }, false); window.addEventListener("mousemove", function(e) { let x = e.clientX; let y = e.clientY; pointer.style.top = y + "px"; pointer.style.left = x + "px"; }, false); } else { console.log("canvas or addEventListener is unsupported!"); } function updateSize() { canvas.width = window.innerWidth * 2; canvas.height = window.innerHeight * 2; canvas.style.width = window.innerWidth + 'px'; canvas.style.height = window.innerHeight + 'px'; ctx.scale(2, 2); width = (canvas.width = window.innerWidth); height = (canvas.height = window.innerHeight); origin = { x: width / 2, y: height / 2 }; normal = { x: width / 2, y: height / 2 }; } class Ball { constructor(x = origin.x, y = origin.y) { this.x = x; this.y = y; this.angle = Math.PI * 2 * Math.random(); if (longPressed == true) { this.multiplier = randBetween(14 + multiplier, 15 + multiplier); } else { this.multiplier = randBetween(6, 12); } this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle); this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle); this.r = randBetween(8, 12) + 3 * Math.random(); this.color = colours[Math.floor(Math.random() * colours.length)]; } update() { this.x += this.vx - normal.x; this.y += this.vy - normal.y; normal.x = -2 / window.innerWidth * Math.sin(this.angle); normal.y = -2 / window.innerHeight * Math.cos(this.angle); this.r -= 0.3; this.vx *= 0.9; this.vy *= 0.9; } } function pushBalls(count = 1, x = origin.x, y = origin.y) { for (let i = 0; i < count; i++) { balls.push(new Ball(x, y)); } } function randBetween(min, max) { return Math.floor(Math.random() * max) + min; } function loop() { ctx.fillStyle = "rgba(255, 255, 255, 0)"; ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < balls.length; i++) { let b = balls[i]; if (b.r < 0) continue; ctx.fillStyle = b.color; ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false); ctx.fill(); b.update(); } if (longPressed == true) { multiplier += 0.2; } else if (!longPressed && multiplier >= 0) { multiplier -= 0.4; } removeBall(); requestAnimationFrame(loop); } function removeBall() { for (let i = 0; i < balls.length; i++) { let b = balls[i]; if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) { balls.splice(i, 0.5); } } } } |
使用方式
- 1、将上面的代码复制到页面 <head>……</head> 或使用引入外部js文件方式加载到页面中。
- 2、在页面 <body>……</body> 中调用 clickEffect()方法。
调用代码:
1 2 3 |
<script> clickEffect(); </script> |
评论(0)