在很多网站中登录后可以对你说喜欢的文章、图片之类的进行点赞，这个功能效果的实现就是我今天要写的东西。代码不长，但觉得还是很有用的，为 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/