JavaScript之点赞特效

在很多网站中登录后可以对你说喜欢的文章、图片之类的进行点赞，这个功能效果的实现就是我今天要写的东西。代码不长，但觉得还是很有用的，为 js 给用户交互体验上更加友好。在实现过程中，主要的思路有：

  1. 点赞后出现+1的位置及大小
    对其 top、left 和 fontSize 进行变化。

  2. 相对父级position的关系（relative、absolute）
    父级元素 position 设置为 relative ，子级元素设置为 absolute

  3. 透明度（opacity）
    透明度有完全不透明到完全透明进行渐变

  4. 定时器（setIntercal）和清除定时器（clearInterval）
    定时器对+1字体在间隔时间内进行增大凸显出漂浮的效果，在到达一定效果时（透明度为 0 时），清除定时器

  5. 创建标签（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/

 

posted @ 2018-01-30 15:49  x_smile  阅读(2777)  评论(0)  编辑  收藏  举报