jquery仿直播app按钮点赞特效

最新推荐文章于 2023-11-30 20:31:30 发布

转载最新推荐文章于 2023-11-30 20:31:30 发布 · 2.8k 阅读

jQuery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的直播应用中按钮点赞的视觉特效。通过简单的HTML结构配合jQuery动画功能，实现了从按钮位置向上飘动并逐渐消失的心形图案点赞效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery仿直播app按钮点赞特效</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<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; font-family: "微软雅黑";
		line-height: 28px;border-radius: 4px;
	}
</style>

</head>
<body>
<div class="demo"></div>
<input id="btn1" class="btn" type="button" 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() * 5 + 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:"800",
			opacity:"0",
			left: rand,
		},3000)
		
   });
});

</script>
</body>
</html>