抽屉点赞及jQuery CSS操作
1.需要用到的知识点：
CSS处理
$('t1').css('color','red')
点赞：
-$('t1').append()
-$('t1').remove()
-setInterval
-opacity 1-->0
-position
-字体大小，位置
程序：
<!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:50px;
}
</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>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function(){
AddFavor(this)
});
function AddFavor(self){
//dom对象
var fontSize=15;
var top=0;
var right=0;
var opacity=1;
var tag=document.createElement('span');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('fontSize',fontSize+'px');
$(tag).css('position','absolute');
$(tag).css('top',top+'px');
$(tag).css('right',right+'px');
$(tag).css('opacity',opacity);
$(self).append(tag);
var obj=setInterval(function(){
fontSize=fontSize+5;
top=top-5;
right=right-5;
opacity=opacity-0.1;
$(tag).css('fontSize',fontSize+'px');
$(tag).css('position','absolute');
$(tag).css('top',top+'px');
$(tag).css('right',right+'px');
$(tag).css('opacity',opacity);
if(opacity<0){
clearInterval(obj);
$(tag).remove();
}
},100);
}
</script>
</body>
</html>
效果图：
