源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
height: 200px;
border: solid 1px coral;
}
.zan{
width: 30px;
height: 30px;
color: white;
background-color: black;
cursor: pointer;
position: relative;
}
</style>
</head>
<body>
<div class="item"><div class="zan">赞</div></div>
<div class="item"><div class="zan">赞</div></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function () {
$('.zan').click(function () {
var tag=document.createElement('span')
tag.style.color='green';
tag.style.position='absolute';
tag.innerHTML='+1'
var top=5;
var left=5;
var fontsize=12;
var opacity=1;
tag.style.fontSize=fontsize+'px';
tag.style.top=top+'px';
tag.style.left=left+'px';
tag.opacity=opacity;
$(this).append(tag);
var obj=setInterval(function () {
top-=15;
left+=5;
fontsize+=12;
opacity-=0.2;
tag.style.fontSize=fontsize+'px';
tag.style.top=top+'px';
tag.style.left=left+'px';
tag.opacity=opacity;
if(opacity<0){
clearInterval(obj);
tag.remove();
}
},100)
})
})
</script>
</body>
</html>
1518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
