jQuery鼠标点击按钮产生动画特效代码

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

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

以下是 jQuery鼠标点击按钮产生动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/animateClick.js"></script>
<link rel="stylesheet" href="css/main.css" />
<title>jQuery鼠标点击按钮产生动画特效</title>

<script>
$(document).ready(function() {
	$('#btn').animateClick({
		"color":"black"
	});
	$('#btn2').animateClick({
		"color":"green",
		"animation":"tick"
	});
	$('#btn3').animateClick({
		"color":"red",
		"animation":"cross"
	});
	$('#btn4').animateClick({
		"color":"grey",
		"animation":"signal"
	});
	$('#btn5').animateClick({
		"color":"lightblue",
		"animation":"shoot"
	});
});
</script>
</head>
<body>
<div id="heading">
<br><br><br>
<h1>jQuery鼠标点击按钮产生动画特效</h1>
</div>
<div style="margin-top:70px; text-align:center">
<a id="btn" class="button" href="#">Default Animation</a>
<br><br><br><br><br>
<a id="btn2" class="button" href="#">Tick Animation</a>
<a id="btn3" class="button" href="#">Cross Animation</a>
<br><br><br><br><br>
<a id="btn4" class="button" href="#">Signal Animation</a>
<a id="btn5" class="button" href="#">Shoot Animation</a>
</div>
</body>
</html>

JS代码(animateClick.js):

count=0,tcount=0,ccount=0,scount=0,shcount=0,hdim=0,pos=0,time=0,crossallow=1,tickallow=1,function(i){
	i.fn.animateClick=function(o){
	var s={
	color:"black",animation:"",size:10}
;
	o=i.extend(s,o),highi=Math.max.apply(null,i.map(i("body *"),function(t,o){
	return"static"!=i(t).css("position")?parseInt(i(t).css("z-index"))||1:void 0}
)),"tick"==o.animation&&(i("body").append("<style>-webkit-@keyframes draw{
	to{
	stroke-dashoffset:0;
}
}
@keyframes draw{
	to{
	stroke-dashoffset:0;
}
}
</style>"),i(this).click(function(t){
	1==tickallow&&(tickallow=0,dim=10*o.size,mouseX=t.pageX-.24*dim,mouseY=t.pageY-.3*dim,dim=10*o.size,tcount+=1,i("body").append("<div id='tickanime"+tcount+"' style='left:"+mouseX+";
	top:"+mouseY+";
	position:absolute;
	pointer-events:none;
	z-index:"+highi+"'><svg width='"+dim+"' height='"+dim+"'><path id='tickpath' d='M"+dim/10+","+dim/4+" "+dim/5+","+dim/2+" "+1.7*dim+",-"+.6*dim+"' /></svg></div>"),i("#tickpath").css({
	fill:"none",stroke:o.color,"stroke-width":.15*dim,"stroke-dasharray":1.8*dim,"stroke-dashoffset":1.8*dim,"-webkit-animation":"draw .5s ease-in",animation:"draw .5s ease-in"}
),setTimeout(function(){
	i("#tickanime"+tcount).remove(),tickallow=1}
,600))}
)),"cross"==o.animation&&i(this).click(function(t){
	1==crossallow&&(crossallow=0,dim=5*o.size,mouseX=t.pageX-dim/2,mouseY=t.pageY-dim/2,ccount+=1,i("body").append("<div id='crossanime"+ccount+"' style='left:"+mouseX+";
	top:"+mouseY+";
	position:absolute;
	pointer-events:none;
	z-index:"+highi+"'><svg width='"+dim+"' height='"+dim+"'><path id='crosspath' d='M0 0 L"+dim+" "+dim+" Z M"+dim+" 0 L0 "+dim+" Z' /></svg></div>"),i("#crosspath").css({
	fill:"none",stroke:o.color,"stroke-width":.25*dim}
),i("#crossanime"+ccount).fadeTo("fast",1).fadeTo("fast",0),setTimeout(function(){
	i("#crossanime"+ccount).fadeTo("fast",1).fadeTo("fast",0)}
,500),setTimeout(function(){
	i("#crossanime"+ccount).remove(),crossallow=1}
,1e3))}
),"signal"==o.animation&&i(this).click(function(t){
	for(time=0,pos=0,hdim=0,dim=o.size/2,mouseX=t.pageX-2.5*dim,mouseY=t.pageY-5*dim,scount+=1,i("body").append("<div id='signalanime"+scount+"' style='left:"+mouseX+";
	top:"+mouseY+"'><ul id='ulcircles"+scount+"'></ul></div>"),q=1;
	q<=dim;
	q++)i("#signalanime"+scount+" ul").append("<li> </li>");
	for(ulcircles=i("#ulcircles"+scount).children("li"),q=0;
	q<dim;
	q++)hdim+=4*dim,i(ulcircles[q]).fadeOut(0),i(ulcircles[q]).css({
	height:hdim,width:hdim,left:pos,top:pos}
),pos-=2*dim;
	for(q=0;
	q<dim;
	q++)i(ulcircles[q]).fadeIn(time),time+=250,i(ulcircles[q]).fadeOut(time);
	i("#signalanime"+scount).css({
	position:"absolute","pointer-events":"none","z-index":highi}
),i("#ulcircles"+scount).css({
	position:"absolute"}
),i("#ulcircles"+scount+" li").css({
	border:dim+"px solid "+o.color,position:"absolute","list-style":"none","border-radius":"100%"}
),timetemp=1e3*dim,setTimeout(function(){
	for(jaba=1;
	jaba<scount-1;
	jaba++)i("#signalanime"+jaba).remove()}
,timetemp)}
),"shoot"==o.animation&&i(this).click(function(s){
	dim=10*o.size,halfdim=dim/2,l=s.pageX-halfdim,t=s.pageY-halfdim,shcount+=1,i("body").append("<svg id='shootanime"+shcount+"'><path class='one' d='M"+halfdim+" "+halfdim+" L"+halfdim+" 0 Z' /><path class='two' d='M"+halfdim+" "+halfdim+" L"+dim+" "+halfdim+" Z' /><path class='three' d='M"+halfdim+" "+halfdim+" L"+halfdim+" "+dim+" Z' /><path class='four' d='M"+halfdim+" "+halfdim+" L0 "+halfdim+" Z' /></svg>"),i("#shootanime"+shcount).css({
	position:"absolute",width:dim,height:dim,left:l,top:t,"stroke-width":o.size,stroke:o.color,"pointer-events":"none",overflow:"visible","z-index":highi}
),i(".one").fadeOut(1e3).css({
	transform:"translate(-0px,-"+innerHeight+"px)","transition-duration":"1s"}
),i(".two").fadeOut(1e3).css({
	transform:"translate("+innerWidth+"px,0px)","transition-duration":"1s"}
),i(".three").fadeOut(1e3).css({
	transform:"translate(-0px,"+innerHeight+"px)","transition-duration":"1s"}
),i(".four").fadeOut(1e3).css({
	transform:"translate(-"+innerWidth+"px,0px)","transition-duration":"1s"}
),setTimeout(function(){
	for(shootjaba=1;
	shootjaba<shcount-1;
	shootjaba++)i("#shootanime"+shootjaba).remove()}
,1e3)}
),""==o.animation&&i(this).click(function(t){
	dim=5*o.size,count+=1,i("body").append("<div id='animateClick"+count+"' style='left:"+t.pageX+";
	top:"+t.pageY+"'></div>"),setTimeout(function(){
	i("#animateClick"+count).css({
	position:"absolute",height:"0px",width:"0px",border:"solid "+o.color,"border-radius":dim+"px","-webkit-transition":"all 300ms linear","-moz-transition":"all 300ms linear","-ms-transition":"all 300ms linear","-o-transition":"all 300ms linear",transition:"all 300ms linear"}
)}
,10),setTimeout(function(){
	i("#animateClick"+count).css({
	"-moz-opacity":0,opacity:0,"-moz-transform":"scale("+dim+")","-webkit-transform":"scale("+dim+")","-o-transform":"scale("+dim+")","-ms-transform":"scale("+dim+")",transform:"scale("+dim+")","z-index":highi}
)}
,25),setTimeout(function(){
	i("#animateClick"+count).remove()}
,500)}
)}
}
(jQuery);

CSS代码(main.css):

@font-face{font-family:"Montserrat";src:url('../fonts/Montserrat.otf'),url('../fonts/Montserrat.otf');/* IE */
}
body{height:100%;margin:0;padding:0;font-family:Montserrat;text-align:center;background-color:rgb(0,51,51);overflow-x:hidden;}
#menu{background-color:rgb(0,0,0);text-align:left;color:rgb(204,204,204);padding:10px;padding-left:40px;}
#menu a{padding-left:20px;padding-right:20px;text-decoration:none;color:rgb(204,204,204);}
#footer{width:100%;position:fixed;bottom:0;background-color:rgb(0,0,0);text-align:center;font-size:10px;color:rgb(204,204,204);padding:5px;}
#heading{color:rgb(255,255,255);}
.button{width:100px;color:rgb(255,255,255);border:rgb(255,255,255) solid;border-radius:15px;padding:15px;text-decoration:none;}
.button:hover{background-color:rgb(255,255,255);color:rgb(51,51,51);transition:ease-in-out .5s;}

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