在很多网站中登录后可以对你说喜欢的文章、图片之类的进行点赞，这个功能效果的实现就是我今天要写的东西。代码不长，但觉得还是很有用的，为 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---访问权限修饰符如何控制成员变量、成员方法及类的访问范围

    1.Java有三种访问权限修饰符,分别为public.protected.private,还有一种为缺省权限修饰符的情况,记为default.其中,可以由public和default来修饰类:这四种修 ...

  2. webapi框架搭建-创建项目（三）-webapi owin

    上一篇:创建项目(二) 在上一篇里,我们已经创建好了webapi应用,并已经部署到iis里,本篇讲如何用owin自宿主或是iis宿主来部署webapi应用. owin介绍 传统的asp.net网站只能 ...

  3. springmvc 访问时找不到配置文件

    运行tomcat时一切正常,访问时报了init()错误,后台报的是fileNotFoundException,原因时找不到spring的配置文件,web.xml主要配置如下 <!-- sprin ...

  4. fastboot模式

    快速启动. 在安卓手机中fastboot是一种比recovery更底层的刷机模式. fastboot是一种线刷,就是使用USB数据线连接手机的一种刷机模式. recovery是一种卡刷,就是将刷机包放 ...

  5. Erlang epmd官方文档中文翻译

    本文含epmd简介及官方文档之翻译,文档地址 http://erlang.org/doc/man/epmd.html翻译时的版本 R19.1 中英文水平都不咋地,不通顺处海涵,就酱. 简介 Erlan ...

  6. 一次关于js事件出发机制反常的解决记录

    起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的, ...

  7. python写一个翻译的小脚本

    起因: 想着上学看不懂English的PDF感慨万分........ 然后就有了翻译的脚本. 截图: 代码: #-*- coding:'utf-8' -*- import requests impor ...

  8. 蓝桥杯模拟赛-引爆炸弹-DFS+并查集

    今天整理电脑,翻出来了很久以前大佬给的题,贴一下. 引爆炸弹 1000ms 在一个 n×m的方格地图上,某些方格上放置着炸弹.手动引爆一个炸弹以后,炸弹会把炸弹所在的行和列上的所有炸弹引爆,被引爆的炸 ...

  9. 斐波那契数列 Library

    http://acm.tju.edu.cn/toj/showp3267.html3267.   Library Time Limit: 1.0 Seconds   Memory Limit: 6553 ...

  10. Kafka入门介绍

    1. Kafka入门介绍 1.1 Apache Kafka是一个分布式的流平台.这到底意味着什么? 我们认为,一个流平台具有三个关键能力: ① 发布和订阅消息.在这方面,它类似一个消息队列或企业消息系 ...