js 实现点赞
js 实现点赞
唔，我真垃圾
效果图如下：
代码如下：
<!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>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js" ></script>
<script>
$('.item').click(function () {
AddFaove(this);
});
function AddFaove(self) {
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("position","absolute");
$(tag).css('fontSize',fontSize +'px');
$(tag).css('top',top +'px');
$(tag).css('right',right +'px');
$(tag).css('opacity',opacity);
$(self).append(tag);
var obj=setInterval(function () {
fontSize=fontSize + 10;
top=top-15;
right=right-15;
opacity=opacity-0.2;
$(tag).css('fontSize',fontSize +'px');
$(tag).css('top',top +'px');
$(tag).css('right',right +'px');
$(tag).css('opacity',opacity);
if(opacity<0){
clearInterval(obj);
$(tag).remove();
}
},100);
// var v=$(self);
//
// console.log(v);
}
</script>
</body>
</html>
