<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
width:200px;
height：300px;
position:relative;
line-height:300px;
border:1px solid grey;
padding-left:100px;
}
</style>
</head>
<body>
<div class="item">
<span>赞</span>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(".item").click(function(){
var position = 'absolute';
var left = 115;
var top = 0;
var span = document.createElement('span');
var opacity = 1;
var fontsize = 10;
$(span).text("+1");
$(span).css('position',position);
$(span).css('left',left+"px");
$(span).css('top',top+"px");
$(span).css('opacity',opacity);
$(this).append(span);
//用定时器开始显示
var obj = setInterval(show,500);
function show(){
left = left + 7;
top = top - 6;
opacity = opacity - 0.3;
fontsize = fontsize + 10;
$(span).css('left',left+"px");
$(span).css('top',top+"px");
$(span).css('opacity',opacity);
$(span).css('color','red');
$(span).css('font-size',fontsize + "px");
if(opacity<0){
clearInterval(obj); //删除定时器
$(span).remove(); //定时器虽然删除，但是这个span标签还在，也要删除
}
}
})
</script>
</body>
</html>
7189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
