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

代码如下：

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

JavaScript之点赞特效的更多相关文章

  1. JavaScript实战-菜单特效

    以下是我自己用原生JS写的各种菜单特效,虽然网上一搜一大堆,但我还是喜欢自己来写一写! 这是上一篇:JavaScript实战(带收放动画效果的导航菜单) 下面是经过优化后的完整代码,优化了CSS样式. ...

  2. javascript学习-原生javascript的小特效（原生javascript实现链式运动）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  3. javascript学习-原生javascript的小特效（多个运动效果整理）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  4. ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件(二)

    1. 为啥要做这个点赞插件?    praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...

  5. 《JavaScript网页经典特效300例》

    <JavaScript网页经典特效300例> 基础篇 进阶篇 高级篇

  6. ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件（二）

    1. 为啥要做这个点赞插件?    praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...

  7. javascript图片展示墙特效

    查看效果:http://hovertree.com/code/javascript/pwl4bhoi.htm 代码如下: <!DOCTYPE html> <html> < ...

  8. javascript学习-原生javascript的小特效（多物体运动效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 今天为大家做的是多个物体的运动效果, 1:HTML <body> <ul>       <li> ...

  9. javascript学习-原生javascript的小特效（改变透明度效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 ( 以下效果兼容IE5+ IE5-以下没有测试哦) 今天为大家演示的效果是一个div,鼠标经过的时候透明度为100%,鼠标移出的时 ...

随机推荐

  1. mysql之其他

    一 IDE工具介绍 下载链接:https://pan.baidu.com/s/1bpo5mqj 掌握: 1. 测试+链接数据库 2. 新建库 3. 新建表,新增字段+类型+约束 4. 设计表:外键 5 ...

  2. 算法8 五大查找之：二叉排序树(BSTree)

    上一篇总结了索引查找,这一篇要总结的是二叉排序树,又称为二叉搜索树(BSTree) . 构造一棵二叉排序树的目的,其实并不是为了排序,而是为了提高查找和插入删除的效率. 什么是二叉排序树呢?二叉排序树 ...

  3. String常用的方法

    l String: 字符串类,字符串是常量:它们的值在创建之后不能更改 l 方法 boolean equals(Object obj) 判断两个字符串中的内容是否相同 boolean equalsIg ...

  4. ECJTUACM16 Winter vacation training #5 题解&源码

    A------------------------------------------------------------------------------------------- 题目链接:ht ...

  5. HDU5752-Sqrt Bo

    Sqrt Bo Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total S ...

  6. HDU--1164

    Eddy's research I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  7. 微信小程序使用字体图标的方法

    一.先到阿里巴巴矢量图标库(http://iconfont.cn/),用微博帐号登录,搜索你想要的图标,然后添加入库 从项目里下载下来并解压,找到ttf格式文件 二.到这个平台https://tran ...

  8. Zigbee Class 直播公告2016-10-10

    周一我们将开始本期课程的首次直播, 详情如下: 场次 第一场 阶段 入门 开始时间 2016-10-10  19:00 结束时间 不定 斗鱼地址 douyu.com/zigbeeclass 内容 本期 ...

  9. timeit模块

    算法是计算机处理信息的本质,因为计算机程序本质上是一个算法来告诉计算机确切的步骤来执行一个指定的任务.一般地,当算法在处理信息时,会从输入设备或数据的存储地址读取数据,把结果写入输出设备或某个存储地址 ...

  10. 百度地图API显示多个标注点带百度样式信息检索窗口的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...