仿直播点赞效果

效果

代码

• 在html里，加一个div，这个div的位置就是飘出来的小元素开始显示的位置

<div class="demo"></div>

• 点击的时候，往class为demo的div里填入img标签，图片路径最后的名字是随机的（提前有几张图片，名字后面以数字排序），且让这些图片进行动画

$(".Plive_like").click(function() {
	let x = 30,//飘出来元素的x范围
		y = 900,//飘出来元素的y范围
		num = Math.floor(Math.random() * 3 + 1),//图片的随机数，我有三张图片，所以*3
		index = $('.demo').children('img').length,//当前添加的飘动元素是第几个
		rand = parseInt(Math.random() * (x - y + 1) + y);

	$(".demo").append("<img src=''>");
	$('.demo img:eq(' + index + ')').attr('src', '/Public/JZZWine/img/live/img' + num + '.png')
	$(".demo img").animate({
		bottom: "800px",
		opacity: "0",
		left: rand,
	}, 3000)
})

转载于jquery仿直播app按钮点赞动画效果