jQuery鼠标点击弹出粒子效果动画代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标点击弹出粒子效果动画代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="gb2312">
<title>jQuery鼠标点击弹出粒子效果动画</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/clickspark.min.js"></script>
<script>
$(document).ready(function () {

	$('.button-1').clickSpark();

	$('.button-2').clickSpark({
		particleImagePath: 'particle-2.png',
		particleCount: 35,
		particleSpeed: 10,
		particleSize: 15,
		particleRotationSpeed: 20
	});

	$(document).ready(function () {
		$('.button-3').click(function () {
			clickSpark.setParticleCount(50);
			clickSpark.setParticleSize(12);
			clickSpark.setParticleSpeed(12);
			clickSpark.setParticleImagePath('particle-4.png');
			clickSpark.fireParticles($('.sparklingDiv'));
		});
	});
});
</script>

<style>
.bg-info {
	padding: 1px 0 15px 15px;
}

.sparklingDiv {
	border: 1px solid grey;
	height: 60px;
	width: 100px;
}

.sparklingDivContainer {
	position: absolute;
	top: 0px;
	right: 30px;
}
</style>

</head>
<body>

<div class="container">
<br><br><br><br>
    <div class="row">
        <div class="col-sm-4">
            <div class="bg-info">
                <h4 class="text-muted">演示</h4>
                <button class="btn btn-default button-1">点击我！</button>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="bg-info">
                <h4 class="text-muted">演示</h4>
                <button class="btn btn-default button-2">点击我！</button>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="bg-info">
                <h4 class="text-muted">演示</h4>
                <button class="btn btn-default button-3">点击我！</button>
                <div class="sparklingDivContainer">
                    target div
                    <div class="sparklingDiv"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

JS代码(clickspark.min.js):

/* * Clickspark JavaScript utility v1.0.0 * https://github.com/ymc-thzi/clickspark.js * * Thomas Zinnbauer @ YMC * * 2015 YMC AG | Sonnenstrasse 4 | CH-8280 Kreuzlingen | Switzerland * http://www.ymc.ch * */
csDefaultSpecs={
	particleImagePath:"",particleCount:35,particleSpeed:12,particleSize:12,particleRotationSpeed:0}
,$.fn.clickSpark=function(e){
	void 0==e&&(e={
	particleImagePath:csDefaultSpecs.particleImagePath,particleCount:csDefaultSpecs.particleCount,particleSpeed:csDefaultSpecs.particleSpeed,particleSize:csDefaultSpecs.particleSize,particleRotationSpeed:csDefaultSpecs.particleRotationSpeed}
),$(this).on("click",function(t){
	clickSpark.setParticleImagePath(e.particleImagePath),clickSpark.setParticleCount(e.particleCount),clickSpark.setParticleSpeed(e.particleSpeed),clickSpark.setParticleSize(e.particleSize),clickSpark.setParticleRotationSpeed(e.particleRotationSpeed),clickSpark.stdFuncOCl(t)}
)}
;
	var clickSpark=function(){
	function e(){
	o()}
function t(e){
	void 0!=e&&(f=e)}
function i(e){
	void 0!=e&&(S=e)}
function c(e){
	void 0!=e&&(v=e)}
function a(e){
	void 0!=e&&(h=e)}
function n(e){
	void 0!=e&&(w=e)}
function o(){
	$(document).ready(function(){
	$("body").prepend('<div class="cs-canvas-container"><canvas id="cs-particle-canvas"></canvas></div>'),$(".cs-canvas-container").hide(),$("#cs-particle-canvas").hide(),$(".cs-canvas-container").css({
	position:"fixed",zIndex:99999,width:500,height:500}
)}
)}
function s(){
	var e={
}
;
	return g&&(e.x=g.width/2,e.y=g.height/2,e.rotation=0),e.xSpeed=A(-1*v,v),e.ySpeed=A(-1*v,v),e.rotationSpeed=A(-1*w,w),e.size=h,e}
function r(){
	g=document.getElementById("cs-particle-canvas"),""==f?(defaultImg="data:image/png;
	base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAc5pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgRmlyZXdvcmtzIENTNTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KaBqfRAAAATZJREFUOBGtlM2NwjAQhd+MAndaSAu5cuBAC9RAAyuxVICQtgFqoAUOHLi6BbfAnY3ineeNTXYvKA6WRv59X8bxzAj+teUhLCqgeSg2CGhsuzZbmN3NPARu3uHcAu62F67lJnlkg+VXaAKwC20GEEJLjeJoUsGb+Hj7EJc2M2x1COtWsOuAddp81StwqQKO171ceDbC6FHX4mRzXmtsc1phSw+F/yjMcLKrbcZS0nm78lm+sTUomv4fpb3RPfXkaHy13xcbDRkIanK0f/7BeuHQwsgeJIdBISXKGD41YcM4mgQk7E8UT6DdCfNvANIhr8y1Cd48pcZRJi2pz9WikSdHmf1M2iJEL6KeHGUZYfbbeul1XawexuEDgEk6D/i0Scz+/oMvO56nLpWhXIKofFs9S25MqbQ/ard2fSmw8JoAAAAASUVORK5CYII=",particleImg=new Image,particleImg.src=defaultImg):(particleImg=new Image,particleImg.src=f),g&&"function"==typeof g.getContext&&(m=g.getContext("2d"),bodyWidth=document.body.clientWidth,m.canvas.width=$(".cs-canvas-container").width()>bodyWidth?bodyWidth:2*$(".cs-canvas-container").width(),m.canvas.height=$(".cs-canvas-container").height()),l()}
function l(){
	for(var e=0;
	S>e;
	e++)k.push(s())}
function d(){
	m.clearRect(0,0,window.innerWidth,window.innerHeight);
	for(var e=0;
	S>e;
	e++){
	var t=k[e];
	t.size=t.size*(.96+A(1,10)/100),t.x=t.x+t.xSpeed,t.y=t.y+t.ySpeed,t.rotation=t.rotation+t.rotationSpeed,m.save(),m.translate(t.x,t.y),m.rotate(t.rotation*Math.PI/180),m.drawImage(particleImg,-(particleImg.width/2),-(particleImg.height/2),t.size,t.size),m.restore()}
}
function p(){
	if(R){
	var e=b;
	b=Date.now(),requestAnimationFrame(p,b-e),d()}
}
function A(e,t){
	return Math.random()*(t-e)+e}
function u(e){
	b=Date.now();
	var t,i;
	"click"==e.type?(t=e.pageX,i=e.pageY):(t=e.offset().left+e.width()/2,i=e.offset().top+e.height()/2),k=[],particle=null,r(),$(".cs-canvas-container").width()>bodyWidth?$(".cs-canvas-container").css("left",t-$(".cs-canvas-container").width()/2):$(".cs-canvas-container").css("left",t-$(".cs-canvas-container").width()),$(".cs-canvas-container").css("top",i-$(".cs-canvas-container").height()/2),$(".cs-canvas-container").show(),$("#cs-particle-canvas").show(),window.setTimeout(function(){
	$("#cs-particle-canvas").fadeOut()}
,400),R=!0,p(),window.setTimeout(function(){
	$("#cs-particle-canvas").hide(),$(".cs-canvas-container").hide(),R=!1}
,800)}
var g,m,f=csDefaultSpecs.particleImagePath,S=csDefaultSpecs.particleCount,v=csDefaultSpecs.particleSpeed,w=csDefaultSpecs.particleRotationSpeed,h=csDefaultSpecs.particleSize,I=60,C=1e3/I,b=0,R=!1,k=[];
	return e(),window.requestAnimationFrame=function(){
	return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e,t){
	var i=C;
	t>i&&(i-=t-i,0>i&&(i=0)),window.setTimeout(e,i)}
}
(),{
	setParticleImagePath:function(e){
	t(e)}
,setParticleCount:function(e){
	i(e)}
,setParticleSpeed:function(e){
	c(e)}
,setParticleSize:function(e){
	a(e)}
,setParticleRotationSpeed:function(e){
	n(e)}
,init:function(){
	u(element)}
,fireParticles:function(e){
	u(e)}
,stdFuncOCl:function(e){
	u(e)}
}
}
();

附件:下载该文件资源,减少时间成本(增值服务)