在很多网站中登录后可以对你说喜欢的文章、图片之类的进行点赞，这个功能效果的实现就是我今天要写的东西。代码不长，但觉得还是很有用的，为 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. Java学习笔记10（面向对象三：接口）

    接口: 暂时可以理解为是一种特殊的抽象类 接口是功能的集合,可以看作是一种数据类型,是比抽象类更抽象的"类" 接口只描述所应该具备的方法,并没有具体实现,具体实现由接口的实现类(相 ...

  2. 常见的DBCP连接池配置

    项目中使用mybatis出现一个问题,项目刚启动时,查询项目列表是ok的,过上一段时间之后,再次查询项目列表,查询失败,初步判断是因为mysql的连接问题,最后查阅资料,发现是连接池中的连接失效,导致 ...

  3. CSS列表及导航条

    大多数网页中都包含某种形式的列表,今天我们就来联系几个基本的导航条.   垂直导航条 注意要点: 去掉默认的项目符号(list-style-type:none),将外边距和内边距都设为0. 以em设置 ...

  4. 博客已经迁移到 http://imbotao.top 也会同步到这儿

    完全是看到别人搭建的 hexo + github Pages 博客界面很好看,很简洁,自己也喜欢折腾,就鼓捣了一个. 也在阿里云买了自己的域名,个人感觉在博客的样式和功能上花费了太多的时间,不过现在终 ...

  5. 先从_proto_下手理解原型--原型学习（一）

    给自己关于原型的学习分了一个大类,主要跟踪学习js的原型.--来自<JavaScript面向对象编程指南>的笔记,这本书难度适中,适合我们这种js基础不牢的人学习. 原型这块有两个属性:p ...

  6. DQN算法

    DQN算法:基础入门看看 # -*- coding: utf-8 -*- import random import gym import numpy as np from collections im ...

  7. Linux ssh双向免密认证

    一.实现原理 使用一种被称为"公私钥"认证的方式来进行ssh登录."公私钥"认证方式简单的解释是: 首先在客户端上创建一对公私钥(公钥文件:~/.ssh/id_ ...

  8. jsp的内置对象

    JSP内置对象即无需声明就可以直接使用的对象实例,在实际的开发过程中,比较常用的JSP对象有request,response,session,out和application等,笔者在本文章中将简单介绍 ...

  9. C语言中%d，%p，%u，%lu等都有什么用处

    %d 有符号10进制整数(%ld 长整型,%hd短整型 )%hu 无符号短整形(%u无符号整形,%lu无符号长整形)%i 有符号10进制整数 (%i 和%d 没有区别,%i 是老式写法,都是整型格式) ...

  10. spring的applicationContext.xml没有自动提示（使用本地的文档）

    http://www.springframework.org/schema/beans/spring-beans.xsd Window>>preference>>搜索xml(X ...