jQuery仿直播app按钮点赞特效js代码

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

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

以下是 jQuery仿直播app按钮点赞特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery仿直播app按钮点赞特效</title>
 <style type="text/css">
	img{ width: 20px; height: 20px; position: absolute; bottom: 100px; left: 50%; margin-left: -10px; }
	.btn{ width: 100px; height: 30px; border:0; background: red; color: #fff; position: absolute; bottom: 100px; left: 50%; margin-left: -50px; }
</style>

</head>
<body>
<div class="demo"></div>
<input id="btn1" type="button" class="btn" value="变换" />

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
		   
 
   $("#btn1").click(function(){
		var x = 100;       
		var y = 900;  
		var num = Math.floor(Math.random() * 3 + 1);
		var index=$('.demo').children('img').length;
		var rand = parseInt(Math.random() * (x - y + 1) + y); 
		
		$(".demo").append("<img src=''>");
		$('img:eq(' + index + ')').attr('src','images/'+num+'.png')
		$("img").animate({
			bottom:"800px",
			opacity:"0",
			left: rand,
		},3000)
   })
}) 
</script>
</body>
</html>

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