<!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. string.Empty, "" 和 null 三者的区别

    转载:http://www.cnblogs.com/mxxblog/archive/2013/08/22/3275387.html 这是一个及其常见的问题,网上已经有关于这个问题的很多讨论.但是我觉得 ...

  2. [Kubernetes]CentOS7下搭建Harbor仓库

    环境依赖: Harbor仓库需要环境:Python 2.7或以上版本,Docker 1.10或以上,Docker Compose 1.6.0或以上. CentOS7自带Python,所以不需要安装. ...

  3. Listary的使用

    前几天研究米老师语录之后,开始对工具的使用着迷.现在的慢是为了以后的快,所以现在研究的一些东西,是为了以后在工作中可以更加快速的提高效率. 最近找到了一款很不错的软件,Listary.想给小伙伴们介绍 ...

  4. eMMC基础技术3：eMMC总线token

    1.前言 本文主要介绍eMMC 总线协议相关的内容,主要包括: (1)command token format (2)response token format (3)data packet form ...

  5. Go语言中的struct tag

    有时在Go的结构体定义时会看到这样的形式: type User struct { UserId int `json:"user_id" bson:"b_user_id&q ...

  6. 新版本微信导致的ios表单bug

    解决方法如下: $(document).delegate('input, textarea, select', 'blur', function(){ setTimeout(function(){ $ ...

  7. 请求Jenkins链接返回403

    使用python请求Jenkins链接,返回403 1.使用正确的账号密码(Jenkins -> 系统设置 -> 全局安全设置),该账户拥有访问该Jenkins链接的权限 2.代码中的账号 ...

  8. GIT入门文档

    集中式(SVN): 集中式版本控制系统,版本库是集中存放在中央服务器的,用的都是自己的电脑,所以要先从中央服务器取得最新的版本,然后开始干活,干完活了,再把自己的活推送给中央服务器. 集中式版本控制系 ...

  9. Lua学习总结

    由于一些工作上的需要,开始对Lua的学习.之前有JavaScript的基础,而且两者都是脚本语言,所以本总结旨在列出与JavaScript不同的地方,方便后续的回顾和学习.下面进入正题吧! 1.注释 ...

  10. why should the parameter in copy construction be a reference

    if not, it will lead to an endless loop!!! # include<iostream> using namespace std; class A { ...