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