<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
padding: 50px;
border: 1px solid #dddddd;
}
.item {
position: relative;
width: 30px;
}
</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>
<script src="jquery-1.12.4.js"></script>
<script>
$(‘.item‘).click(function () {
adFavor(this);
});
function adFavor(self) {
// var t=$(self)
// console.log(t)
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 v = setInterval(function () {
fontSize = fontSize + 5;
top = top - 5;
right = right - 5;
opacity = opacity - 0.2;
$(tag).css(‘fontSize‘, fontSize + ‘px‘);
$(tag).css(‘top‘, top + ‘px‘);
$(tag).css(‘right‘, right + ‘px‘);
$(tag).css(‘opacity‘, opacity);
// console.log(opacity)
if (opacity < 0) {
clearInterval(v);
$(tag).remove();
// 移除这个标签
// <span style="color: green; position: absolute; font-size: 45px; right: -30px; top: -30px; opacity: -0.2;">+1</span>
}
}, 40);
}
</script>
</body>
</html>
点赞
时间： 2024-10-10 15:27:14