<!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>