<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style > .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position: relative; 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="jquery1.9.js"></script> <script> $(".item").click(function () { // console.log(11); AddFavor(this); }) function AddFavor(self) { var fontsize=3; var top=0; var right=0; var opcity=1; var tag=document.createElement('span'); $(tag).text("+1"); $(tag).css("color","green"); $(tag).css("position","absolute"); $(tag).css("fontSize",fontsize+"px"); $(tag).css("right",right+"px"); $(tag).css("top",top+"px"); $(tag).css("opacity",opcity); $(self).append(tag); var obj=setInterval(function () { fontsize=fontsize+5; top=top-10; right=right-10; opcity =opcity-0.1; $(tag).css("color","green"); $(tag).css("position","absolute"); $(tag).css("fontSize",fontsize+"px"); console.log(fontsize); $(tag).css("right",right+"px"); $(tag).css("top",top+"px"); $(tag).css("opacity",opcity); if(opcity<0){ clearInterval(obj); $(tag).remove(); } },40); } </script> </body> </html>
注意大小写