<!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. Nginx在局域网中使用ip_hash负载均衡策略，访问全部分发到同一个后台服务器

    Nginx的ip_hash算法都将一个ip地址的前三段作为hash的关键字

  2. GridView item设置点击背景

    GridView item设置点击背景 android:listSelector="@android:color/transparent"

  3. CMakeLists 链接库相关指令

    set(LSTAR_DIR "$ENV{HOME}/LStar_build") include_directories(${LSTAR_DIR}) LINK_DIRECTORIES ...

  4. SQL Server - 索引详细教程 （聚集索引，非聚集索引）

    转载自:https://www.cnblogs.com/hyd1213126/p/5828937.html 作者:爱不绝迹 (一)必读:深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录. ...

  5. 集合排序 Comparator和Comparable的使用区别

    Java 排序 Compare  Comparator接口 Comparable接口 区别 在Java中使用集合来存储数据时非常常见的,集合排序功能也是常用功能之一.下面看一下如何进行集合排序,常用的 ...

  6. HttpResonse 要记得关闭

    写了一个小程序,要识别网站上的图片,用到HttpRequest发请求,HttpResponse接受返回数据.刚开始循环可以跑两个,但是总是提示超时.后来查资料发现,在Http协议中,规定了同个Http ...

  7. ASP.NET MVC5入门3之登录验证

    参考: HTML页面模版: http://www.ui.cn/detail/70262.html(第38个) MVC后台代码参考: http://www.oschina.net/p/nfine 开发环 ...

  8. Netty学习4—NIO服务端报错：远程主机强迫关闭了一个现有的连接

    1 发现问题 NIO编程中服务端会出现报错 Exception in thread "main" java.io.IOException: 远程主机强迫关闭了一个现有的连接. at ...

  9. 通过dd命令显示硬盘的读写性能

    测试vdb硬盘的读写速度 1.分区格式化挂载vdb硬盘 2.新建写入文件2 3.测试:文件2中写入数据,设置块大小为100M,拷贝块个数为5 经过测试:测试效果一般count越高越准确,建议为300, ...

  10. Python-递归、三元表达式列表生成式等

    一.函数递归 1.什么是函数递归:函数的递归调用是函数嵌套的一种特殊形式,在调用一个函数的过程中又直接或者间接地调用该函数本身,称之为函数的递归调用 2.递归调用必须明确的两个阶段: 1.回溯:一次次 ...