在很多网站中登录后可以对你说喜欢的文章、图片之类的进行点赞，这个功能效果的实现就是我今天要写的东西。代码不长，但觉得还是很有用的，为 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. [Spark内核] 第40课：CacheManager彻底解密：CacheManager运行原理流程图和源码详解

    本课主题 CacheManager 运行原理图 CacheManager 源码解析 CacheManager 运行原理图 [下图是CacheManager的运行原理图] 首先 RDD 是通过 iter ...

  2. 微信小程序跳一跳辅助程序（手动版）

    最近,微信官方推出了demo小程序游戏<跳一跳>,这个游戏操作简单,容易上手,却又不容易获得高分,受到很多人的喜爱(emm...这游戏有毒).自己也尝试了玩了几次,作为一个手残+脑残的资深 ...

  3. IIS发布 用户 \'IIS APPPOOL\\X\' 登录失败

    曾多次遇到这个问题,我的解决方案就是修改数据库连接字符串 网上给的解决方案就是更换应用程序池的"进程模型":参考:http://jingyan.baidu.com/album/20 ...

  4. java指令重排序的问题

    转载自于:http://my.oschina.net/004/blog/222069?fromerr=ER2mp62C 指令重排序是个比较复杂.觉得有些不可思议的问题,同样是先以例子开头(建议大家跑下 ...

  5. 类Unix平台程序调试

    GNU Binutils GNU Binutils 建立main.c文件,内容如下: #include <stdio.h> void main() { int a = 5/0; } 编译m ...

  6. CSS3让文本自动换行——word-break属性

    1.依靠浏览器让文本自动换行 浏览器本身都自带着让文本自动换行的功能. 2.指定自动换行的处理方法 在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法. div{ word-b ...

  7. CSS3中only-child伪类选择器

    <body> <style type="text/css"> //只对li1设置样式 li:nth-child(1):nth-last-child(1){ ...

  8. JavaScript的ajax使用

    使用ajax首先定义个XMLHttpRequest变量,为了判断对IE6以及以下版本的兼容性,需要var xmlHR;        if (window.XMLHttpRequest) {      ...

  9. 微信小程序开发官方文档解读

    创建页面 在这个教程里,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下.微信小程序中的每一个页面的[路径+页面名]都需要写在 app ...

  10. MongoDB模拟多文档事务操作

    Mongodb不支持多文档原子性操作,因此依据两阶段提交协议(Two Phase Commits protocol)来模拟事务. 以两个银行账户之间的转账行为为例,来说明如何实现多文档间的事务操作. ...