jQuery-点击按钮弹出心形动画效果

xyc

      今天咱们来说说一个常见的点击按钮弹出不同颜色的心形图的动画效果。直接上代码，有需要的可直接拿走不谢！
      效果：
      

       css样式：
      

[CSS] 纯文本查看 复制代码

img{ width: 20px; height: 20px; position: absolute; bottom: 100px; left: 50%; margin-left: -10px; }
	.btn{ width: 100px; height: 30px; border:0;border-radius: 4px; background: #FF0000; color: #fff; position: absolute; bottom: 100px; left: 50%; margin-left: -50px; }

        HTML：
        

[HTML] 纯文本查看 复制代码

<div class="conts"></div>
<button id="btnOn" type="button" class="btn">点击</button>

        js代码：
        

[JavaScript] 纯文本查看 复制代码

$("#btnOn").click(function(){
		var x = 100;       
		var y = 900;  
		var num = Math.floor(Math.random() * 3 + 1);
		var index=$('.conts').children('img').length;
		var rand = parseInt(Math.random() * (x - y + 1) + y); 
		
		$(".conts").append("<img src=''>");
		$('img:eq(' + index + ')').attr('src','images/'+num+'.png')
		$("img").animate({
			bottom:"800px",
			opacity:"0",
			left: rand,
		},3000)
		
   })

     以上就是实现的全部的代码了，如需源码，请点击》》 点击爱心.zip (40.4 KB, 下载次数: 0)

2021-7-8 14:44 上传

点击文件名下载附件
阅读权限: 90

范范

支持楼主