<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
width: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery.js"></script>
<script>
$('.item').click(function () {
AddFavor(this)
});
function AddFavor(slef) {
var fontSize=15;
var top =0;
var right=0;
var opacity = 1;
var tag = document.createElement('span');
//dom对象,转换为jQuery对象
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('position','absolute');
$(tag).css('fontSize',fontSize +"px");
$(tag).css('top',top +"px");
$(tag).css('right',right +"px");
$(tag).css('opacity',opacity);
$(slef).append(tag);
var obj = setInterval(function () {
fontSize = fontSize + 10;
top =top - 10;
right = right- 10;
opacity =opacity - 0.1;
// 重新赋值
$(tag).css('fontSize',fontSize +"px");
$(tag).css('top',top +"px");
$(tag).css('right',right +"px");
$(tag).css('opacity',opacity);
var v =$(slef);
if (opacity<0){
clearInterval(obj)
$(tag).remove();
}
},100);
}
</script>
</body>
</html>
