在很多网站中登录后可以对你说喜欢的文章、图片之类的进行点赞，这个功能效果的实现就是我今天要写的东西。代码不长，但觉得还是很有用的，为 js 给用户交互体验上更加友好。在实现过程中，主要的思路有：
- 点赞后出现+1的位置及大小
对其 top、left 和 fontSize 进行变化。 - 相对父级position的关系（relative、absolute）
父级元素 position 设置为 relative ，子级元素设置为 absolute - 透明度（opacity）
透明度有完全不透明到完全透明进行渐变 - 定时器（setIntercal）和清除定时器（clearInterval）
定时器对+1字体在间隔时间内进行增大凸显出漂浮的效果，在到达一定效果时（透明度为 0 时），清除定时器 - 创建标签（createElement）和清除标签（remove）
在赞字旁创建一个 span 标签，标签内容为点赞效果出现的字体。在透明度为 0 时，清除此标签
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点赞特效</title> <style>
#container{
padding: 50px;
border:1px solid #aaeeee;
}
#item{
position: relative;
}
</style> </head>
<body>
<div id="container">
<div id="item">
<span>赞</span>
</div>
</div> <script src="jquery-3.2.1.slim.js"></script> #引入jQuery
<script> $('#item').click(function () { #绑定点击事件
addZanStyle(this);
}) function addZanStyle(self){
var sp=document.createElement('span');
var top=0;
var left=0;
var fontSize=15;
var opacity=1;
$(sp).text('+1');
$(sp).css('top',top+'px');
$(sp).css('left',left+'px');
$(sp).css('fontSize',fontSize+'px');
$(sp).css('opacity',opacity);
$(sp).css('color','green');
$(sp).css('position','absolute');
$(self).append(sp);
var inte=setInterval(function(){
top=top-13;
left=left+10;
opacity=opacity-0.2;
fontSize=fontSize+5;
$(sp).css('top',top+'px');
$(sp).css('left',left+'px');
$(sp).css('fontSize',fontSize+'px');
$(sp).css('opacity',opacity);
if(opacity<0){
clearInterval(inte);
$(sp).remove();
}
},100); }
</script> </body>
</html>
原创不易，尊重版权。转载请注明出处：http://www.cnblogs.com/xsmile/