在很多网站中登录后可以对你说喜欢的文章、图片之类的进行点赞，这个功能效果的实现就是我今天要写的东西。代码不长，但觉得还是很有用的，为 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内核] 第31课：Spark资源调度分配内幕天机彻底解密：Driver在Cluster模式下的启动、两种不同的资源调度方式源码彻底解析、资源调度内幕总结

    本課主題 Master 资源调度的源码鉴赏 [引言部份:你希望读者看完这篇博客后有那些启发.学到什么样的知识点] 更新中...... 资源调度管理 任务调度与资源是通过 DAGScheduler.Ta ...

  2. ArcGis连接oracle失败：ORA-6413：连接未打开

    问题: 通过ARCMap 添加Oracle数据库连接时提示,ORA-6413:连接未打开. 运行环境: ArcGis 10.2 Oracle 10g 解决方法: 通过上网查找解决方法,网友说" ...

  3. 【转】Appium的安装-Mac平台（命令行 dmg）

    其实Appium的安装方式主要有两种: 1)自己安装配置nodejs的环境,然后通过npm进行appium的安装 2)直接下载官网提供的dmg进行安装,dmg里面已经有nodejs的环境和appium ...

  4. #pta循环作业

    7-7 计算阶乘和 1.题目 . 2.设计思路     此题目比一道类似的经典题目的区别就是不是直接的数字累加而是每次的数字先累乘之后再累加 只需要在累加之前处理一下所要加的数字就可以实现了 3.流程 ...

  5. deeplearning.ai 卷积神经网络 Week 4 特殊应用：人脸识别和神经风格转换 听课笔记

    本周课程的主题是两大应用:人脸检测和风格迁移. 1. Face verification vs. face recognition Verification: 一对一的问题. 1) 输入:image, ...

  6. 基于Windows下python3.4.1IDLE常用快捷键小结

    安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使用ALT+G 跳到对应行号,在右下角有显示光标所在行.列.ALT ...

  7. DataURL与File,Blob,canvas对象之间的互相转换的Javascript

    canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png'); var dataurl2 = canv ...

  8. Redis介绍及Jedis测试

    1.Redis简介 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构,如 字符串(strings), 散列(hashes ...

  9. c语言基础学习01

    =============================================================================每一种语言都有其独特的语法规则与语言定义. 指 ...

  10. centos7下安装mysql5.7.17

    约定:本文基于Centos7,Mysql5.7.17,经过博主多次测试成功 1.下载mysql.tar.gz 官网下载MySQL安装包,Linux-Generic 64位(根据系统选择64or32) ...