点赞的动态效果,源码如下:
============== URL.py ================
url(r'^zan.html$', views.zan),
============== views.py ===============
def zan(request):
return render(request,'zan.html')
============== HTML =================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
height:100px;
border: 1px solid rebeccapurple;
}
.zan{
height:30px;
30px;
background-color: #252c34;
color: white;
position: relative;
cursor: pointer;
}
.zan span{
position: absolute;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<div class="item">
<div class="zan">赞
</div>
</div>
<div class="item">
<div class="zan">赞</div>
</div>
<div class="item">
<div class="zan">赞</div>
</div>
<div class="item">
<div class="zan">赞</div>
</div>
</div>
<script src="/static/jquery-2.1.4.min.js"></script>
<script>
$(function () {
$('.zan').click(function () {
var fz = 12; //font-size
var tp = 5; //top
var lf = 5; //left
var op = 1; //opacity 透明度
var tag = document.createElement('span');
tag.innerHTML = '+1';
tag.style.color = 'green';
tag.style.fontSize = fz+'px';
tag.style.top = tp+'px';
tag.style.left = lf+'px';
tag.style.opacity = op;
$(this).append(tag);
var obj = setInterval(function () {
fz += 5; //font-size
tp -= 5; //top
lf += 5; //left
op -= 0.2; //opacity 透明度
tag.style.color = 'green';
tag.style.fontSize = fz+'px';
tag.style.top = tp+'px';
tag.style.left = lf+'px';
tag.style.opacity = op;
if(op<0){
clearInterval(obj);
$(tag).remove();
}
}, 100)
})
})
</script>
</body>
</html>