點贊出現數字變大效果

時間 2019-11-20

標籤出現數字變大效果简体版

原文原文鏈接

<!DOCTYPE html>css

<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position: relative; } </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.min.js"></script> <script> $('.item').click(function () { addE(this) }) function addE(self) { var fontSize=20; 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('top',top+'px'); $(tag).css('right',right+'px'); $(tag).css('opacity',opacity); $(self).append(tag); var obj= setInterval(function () { fontSize=fontSize+5; top=top-5; right=right-5; opacity=opacity-0.1; $(tag).css("fontSize",fontSize+'px'); $(tag).css('top',top+'px'); $(tag).css('right',right+'px'); $(tag).css('opacity',opacity); if(opacity<0){ clearInterval(obj); $(tag).remove(); }html