JavaScript之點贊特效

時間 2019-11-13

原文原文鏈接

在不少網站中登陸後能夠對你說喜歡的文章、圖片之類的進行點贊，這個功能效果的實現就是我今天要寫的東西。代碼不長，但以爲仍是頗有用的，爲 js 給用戶交互體驗上更加友好。在實現過程當中，主要的思路有：css

點贊後出現+1的位置及大小
對其 top、left 和 fontSize 進行變化。
相對父級position的關係（relative、absolute）
父級元素 position 設置爲 relative ，子級元素設置爲 absolute
透明度（opacity）
透明度有徹底不透明到徹底透明進行漸變
定時器（setIntercal）和清除定時器（clearInterval）
定時器對+1字體在間隔時間內進行增大凸顯出漂浮的效果，在到達必定效果時（透明度爲 0 時），清除定時器
建立標籤（createElement）和清除標籤（remove）
在贊字旁建立一個 span 標籤，標籤內容爲點贊效果出現的字體。在透明度爲 0 時，清除此標籤

代碼以下：html

 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/jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。