在很多網站中登錄后可以對你說喜歡的文章、圖片之類的進行點贊，這個功能效果的實現就是我今天要寫的東西。代碼不長，但覺得還是很有用的，為 js 給用戶交互體驗上更加友好。在實現過程中，主要的思路有：
- 點贊后出現+1的位置及大小
對其 top、left 和 fontSize 進行變化。 - 相對父級position的關系（relative、absolute）
父級元素 position 設置為 relative ，子級元素設置為 absolute - 透明度（opacity）
透明度有完全不透明到完全透明進行漸變 - 定時器（setIntercal）和清除定時器（clearInterval）
定時器對+1字體在間隔時間內進行增大凸顯出漂浮的效果，在到達一定效果時（透明度為 0 時），清除定時器 - 創建標簽（createElement）和清除標簽（remove）
在贊字旁創建一個 span 標簽，標簽內容為點贊效果出現的字體。在透明度為 0 時，清除此標簽
代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>點贊特效</title> 6 7 <style> 8 #container{ 9 padding: 50px; 10 border:1px solid #aaeeee; 11 } 12 #item{ 13 position: relative; 14 } 15 </style> 16 17 </head> 18 <body> 19 <div id="container"> 20 <div id="item"> 21 <span>贊</span> 22 </div> 23 </div> 24 25 <script src="jquery-3.2.1.slim.js"></script> #引入jQuery 26 <script> 27 28 $('#item').click(function () { #綁定點擊事件 29 addZanStyle(this); 30 }) 31 32 function addZanStyle(self){ 33 var sp=document.createElement('span'); 34 var top=0; 35 var left=0; 36 var fontSize=15; 37 var opacity=1; 38 $(sp).text('+1'); 39 $(sp).css('top',top+'px'); 40 $(sp).css('left',left+'px'); 41 $(sp).css('fontSize',fontSize+'px'); 42 $(sp).css('opacity',opacity); 43 $(sp).css('color','green'); 44 $(sp).css('position','absolute'); 45 $(self).append(sp); 46 var inte=setInterval(function(){ 47 top=top-13; 48 left=left+10; 49 opacity=opacity-0.2; 50 fontSize=fontSize+5; 51 $(sp).css('top',top+'px'); 52 $(sp).css('left',left+'px'); 53 $(sp).css('fontSize',fontSize+'px'); 54 $(sp).css('opacity',opacity); 55 if(opacity<0){ 56 clearInterval(inte); 57 $(sp).remove(); 58 } 59 },100); 60 61 } 62 </script> 63 64 </body> 65 </html>
原創不易，尊重版權。轉載請注明出處：http://www.cnblogs.com/xsmile/