python學習之網站的編寫（HTML，CSS，JS）（二十四）----------示例，點贊，點讚的同時旁邊出現一個逐漸變大的+1殘影並很快消失
阿新 • • 發佈：2019-01-05
<!DOCTYPE html> <html lang="en"> <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 () { AddFavor(this); }); // 加入一個+1的標籤 function AddFavor(self) { // DOM物件 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('position','absolute'); $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); $(self).append(tag); // 設定一個定時器讓+1不斷變化，在透明度達到負數之後就將這個標籤再去掉 var obj = setInterval(function () { fontSize = fontSize + 10; top = top - 10; right = right - 10; opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); if(opacity < 0){ // 清除定時器和標籤 clearInterval(obj); $(tag).remove(); } }, 40); } </script> </body> </html>