示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点赞功能的实现</title>
<style>
.container{
padding: 50px;
height: 200px;
}
.praise{
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<span class="praise">赞</span>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.praise').click(function () {
addPraise(this);
});
function addPraise(self) {
var fontsize = 15;
var left = 15;
var bottom = 0;
// left、bottom都是指标签内容到左边框和下边框之间的像素距离
var opacity = 1;
var s = document.createElement('span');
$(s).text('+1');
$(s).css('position','relative');
// 相对定位，相对于原本位置的定位
$(s).css('color','red');
$(s).css('fontSize',fontsize+'px');
$(s).css('left',left+'px');
$(s).css('bottom',bottom+'px');
$(s).css('opacity',opacity);
$('.container').append(s);
var val = setInterval(function () {
fontsize += 3;
left += 2;
bottom += 5;
opacity -= 0.1;
$(s).css('fontSize',fontsize+'px');
$(s).css('left',left+'px');
$(s).css('bottom',bottom+'px');
$(s).css('opacity',opacity);
if (opacity<0){
clearInterval(val);
$('.praise').siblings().remove();
}
},40)
}
</script>
</body>
</html>