JS实现鼠标点击特效，五颜六色的小球绽放

A snicker

已于 2022-01-23 00:39:52 修改

阅读量2.1k

点赞数

文章标签： javascript 前端开发语言

于 2022-01-23 00:34:50 首次发布

本文链接：https://blog.csdn.net/nice___amusin/article/details/122646320

版权

一个蛮好看的点击特效，复制直接放在模板顶部文件就可以用。

在线体验地址：https://snicker.top/about，点击即可

在这里插入图片描述

js代码：

(function (win, doc) {
	"use strict";
	var defaultParams = {
		colors: ['#eb125f', '#6eff8a', '#6386ff', '#f9f383'],
		size: 30,
		maxCount: 30
	}
	function colorBall(params) {
		this.params = Object.assign({}, defaultParams, params)
	}
	function getOneRandom(arr)
	{
    return arr[Math.floor(Math.random()*arr.length)];
	}
	function _run(ball) {
		var randomXFlag = Math.random() > 0.5
		var randomYFlag = Math.random() > 0.5
		var randomX = parseInt(Math.random() * 160);
		var randomY = parseInt(Math.random() * 160);
		if (randomXFlag) {
				randomX = randomX * -1;
		}
		if (randomYFlag) {
				randomY = randomY * -1
		}
		var transform = 'translate3d('+randomX+'px,' + randomY + 'px, 0) scale(0)';
		ball.style.webkitTransform = transform;
		ball.style.MozTransform = transform;
		ball.style.msTransform = transform;
		ball.style.OTransform = transform;
		ball.style.transform = transform;
	}
	colorBall.prototype.fly = function (x, y, playCount, loopTimer) {
		if (!loopTimer) loopTimer = 300
		var ballElements = []
		var fragment = document.createDocumentFragment()
		
		var ballNum = this.params.maxCount;
		// 修改轮换播放实现方式，改为一次创建所有，通过延迟执行动画实现
		if(playCount) {
			ballNum = ballNum * playCount;
		} 
		var loop = 0
		for(var i=0; i<ballNum; i++) {
			var curLoop = parseInt(i/this.params.maxCount)
			var ball = doc.createElement('i');
			ball.className = 'color-ball ball-loop-' + curLoop;
			var blurX = Math.random() * 10
			if (Math.random() > 0.5) blurX = blurX* -1
			var blurY = Math.random() * 10
			if (Math.random() > 0.5) blurY = blurY* -1
			ball.style.left = (x) + 'px';
			ball.style.top = (y) + 'px';
			ball.style.width = this.params.size + 'px';
			ball.style.height = this.params.size + 'px';
			ball.style.position = 'fixed';
			ball.style.borderRadius = '1000px';
			ball.style.boxSizing = 'border-box';
			ball.style.zIndex = 9999;
			ball.style.opacity = 0;
			if (curLoop === 0) ball.style.opacity = 1;
			ball.style.transform = 'translate3d(0px, 0px, 0px) scale(1)';
			ball.style.webkitTransform = 'translate3d(0px, 0px, 0px) scale(1)';
			ball.style.transition = 'transform 1s ' + curLoop * loopTimer / 1000 + 's ease-out';
			ball.style.webkitTransition = 'transform 1s ' + curLoop * loopTimer / 1000 + 's ease-out';
			ball.style.backgroundColor = getOneRandom(this.params.colors);
			fragment.appendChild(ball);
			ballElements.push(ball)
			// 性能优化终极版
			if (curLoop !== loop) {
				(function(num){
					setTimeout(function(){
						var loopBalls = document.getElementsByClassName('ball-loop-' + num)
						for(var j = 0; j < loopBalls.length; j++) {
							loopBalls[j].style.opacity = 1
						}
						if (num === loop) {
							_clear(ballElements)
						}
					}, num * loopTimer + 30)
				})(curLoop)
				loop = curLoop
			}
		}
		
		doc.body.appendChild(fragment);
		// 延迟删除
		!playCount &&  _clear(ballElements)
		// 执行动画
		setTimeout(function () {
			for(var i=0; i<ballElements.length; i++){
				_run(ballElements[i])
			}	
		}, 10)
	}
	function _clear(balls) {
		setTimeout(function() {
			for(var i=0; i<balls.length; i++){
				doc.body.removeChild(balls[i])
			}	
		}, 1000 )
		
	}
	//兼容CommonJs规范 
	if (typeof module !== 'undefined' && module.exports) {
		module.exports = colorBall;
	};
	//兼容AMD/CMD规范
	if (typeof define === 'function') define(function() { 
		return colorBall; 
	});
	//注册全局变量，兼容直接使用script标签引入插件
	win.colorBall = colorBall;
 })(window, document)

背景：一般这种动画会用canvas实现，但是canvas不是万能的，如果首页加载需要这个动画，页面加载会有大量的请求，这时会阻塞js，造成卡顿
本插件秉着页面加载时尽可能减少js执行原则，采用CSS3结合js，利用硬件加速，提升性能，解决卡顿
默认配置

var params = {
        colors: ["#eb125f", "#6eff8a", "#6386ff", "#f9f383"], // 自定义颜色
        size: 30, // 小球大小
	maxCount: 50, // 点击一次出现多少个球
  }

使用方式

引入click-colorful.js <script src="click-colorful.js"></script>
实力化插件

//params不传，则走默认配置
var color = new colorBall(params)
// 绽放一次
color.fly(x, y)
// 绽放5次,间隔300ms
color.fly(x, y, 5, 300)

html代码：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0, viewport-fit=cover">
	<title>Document</title>
	<style>
		html, body, .main{
			width: 100%;
			height: 100%;
		}
	</style>

</head>
<body>
	<div class="main" ontouchstart="toucuPlayColor(event)" onclick="playColor(event)">
		<h1>五颜六色的点击特效</h1>
	</div>
	<script src="click-colorful.js"></script>
 </body>
<script>
function playColor(e){
	console.log(e)
	var color = new colorBall()
	color.fly(e.clientX, e.clientY)
}
function toucuPlayColor(e) {
	var color = new colorBall()
	color.fly(e.changedTouches[0].clientX,e.changedTouches[0].clientY);
	e.stopPropagation()
	e.preventDefault()
}
var color = new colorBall()
color.fly(document.body.clientWidth/2, document.body.clientHeight/2, 10, 300)
</script>
</body>
</html>

A snicker

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
JS实现鼠标点击特效，五颜六色的小球绽放

一个蛮好看的点击特效，复制直接放在模板顶部文件就可以用。js代码：(function (win, doc) { "use strict"; var defaultParams = { colors: ['#eb125f', '#6eff8a', '#6386ff', '#f9f383'], size: 30, maxCount: 30 } function colorBall(params) { this.params = Object.assign({}, defaultPa
复制链接

扫一扫