<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style >

        .container{

            padding: 50px;

            border:  1px solid #dddddd;

        }

        .item{

            position: relative;

            width:30px;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="item"><span >赞</span>

        </div>

    </div>

    <div class="container">

        <div class="item"><span >赞</span></div>

    </div>

     <div class="container">

        <div class="item"><span >赞</span></div>

    </div>

    <div class="container">

        <div class="item"><span >赞</span></div>

    </div>

    <script src="jquery1.9.js"></script>

    <script>

        $(".item").click(function () {

           // console.log(11);

            AddFavor(this);

        })

        function AddFavor(self) {

            var fontsize=;

            var top=;

            var right=;

            var opcity=;

            var tag=document.createElement('span');

            $(tag).text("+1");

            $(tag).css("color","green");

            $(tag).css("position","absolute");

            $(tag).css("fontSize",fontsize+"px");

            $(tag).css("right",right+"px");

            $(tag).css("top",top+"px");

            $(tag).css("opacity",opcity);

            $(self).append(tag);

            var obj=setInterval(function () {

                fontsize=fontsize+;

                top=top-;

                right=right-;

                opcity =opcity-0.1;

                $(tag).css("color","green");

                $(tag).css("position","absolute");

                $(tag).css("fontSize",fontsize+"px");

                 console.log(fontsize);

                $(tag).css("right",right+"px");

                $(tag).css("top",top+"px");

                $(tag).css("opacity",opcity);

                if(opcity<){

                    clearInterval(obj);

                    $(tag).remove();

                }

            },);

        }

    </script>

</body>

</html>

注意大小写

jqurey实现点赞特效的更多相关文章

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

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

  2. JavaScript之点赞特效

    在很多网站中登录后可以对你说喜欢的文章.图片之类的进行点赞,这个功能效果的实现就是我今天要写的东西.代码不长,但觉得还是很有用的,为 js 给用户交互体验上更加友好.在实现过程中,主要的思路有: 点赞 ...

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

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

  4. jquery 插件之 点赞“+1” 特效

    一般用户点个赞后,都会有个 +1 的特效飘过,用户已经点过赞了,会有“已点过赞”的特效提示 在这里,我们写了一个点赞的插件 //扩展对象点赞插件.点赞特效 //用法:jQuery('.praisebt ...

  5. 微信小游戏开发Canvas资源汇总

    Demo: 微信小程序demo组件:股票分时图 微信小程序小组件:仿直播点赞气泡效果,基于Canvas 优质demo推荐:二维码生成器:使用canvas与纯JS版二维码生成 微信小程序学习用完整dem ...

  6. jQuery入门学习

    一.jQuery的介绍 1.jQuery是一种轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够方便处理HTML Document Events 实现动画效果.方便的进行Aj ...

  7. Python学习（二十三）—— 前端基础之jQuery

    转载自http://www.cnblogs.com/liwenzhou/p/8178806.html 一.jQuery入门 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQue ...

  8. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  9. 前端 --- 6 jQuery 初始

    一.引入方式 1.直接下载文件到本地(最常用),从本地中导入 2.使用文件的网络地址,就像我们img标签里面的那个src的用法差不多. 引入完之后,就可以直接使用jQuery的语法来写了,但是还是要写 ...

随机推荐

  1. P4553 80人环游世界

    题目地址:P4553 80人环游世界 上下界网络流 无源汇上下界可行流 给定 \(n\) 个点, \(m\) 条边的网络,求一个可行解,使得边 \((u,v)\) 的流量介于 \([B(u,v),C( ...

  2. python3字典中items()和python2.x中iteritems()有什么不同？

    在Python2.x中: items() 用于返回一个字典的拷贝列表[Returns a copy of the list of all items (key/value pairs) in D],占 ...

  3. Memcache的安装和使用【转】

    转自:https://www.cnblogs.com/caoxiaojian/p/5715573.html Memcache是高性能,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问 ...

  4. Nand

    1.boolean logic 常用的boolean logic有AND OR NOT,其性质如下 事实上,可用AND和NOT来表示OR x or y = NOT(NOT(x) AND NOT(y)) ...

  5. Python3学习笔记03-基础数据类型

    Python 中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建. 在 Python 中,变量就是变量,它没有类型,我们所说的"类型"是变量所指的内存中对 ...

  6. CentOS6.5 上crontab每天自动备份mysql数据库

    步骤: 1. sudo vi /etc/crontab  #编辑crontab任务 2.输入01 12 * * * root /usr/local/mysql/backup/backup.sh > ...

  7. HDU - 1402 A * B Problem Plus FFT裸题

    http://acm.hdu.edu.cn/showproblem.php?pid=1402 题意: 求$a*b$ 但是$a$和$b$的范围可以达到 $1e50000$ 题解: 显然...用字符串模拟 ...

  8. Docker架构图

    Docker架构图 服务器---主机系统中通过Cgroup和Namespace-----------划分成多个bins/libs---------------每个app运行在独立的bins/libs中 ...

  9. python基础--管理目录与文件

    1) 文件夹 os.listdir() #显示文件夹下所有文件 os.getcwd() #获取当前工作目录 os.chdir() #切换目录 os.mkdir() #建立目录 os.path.exis ...

  10. js获取参数函数