<!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. Tesseract处理背景渐变的图片

    在Tesseract处理背景渐变图片不太理想的情况下, 可以利用Pillow库, 创建一个阈值过滤器来去掉渐变的背景色, 只把文字留下来, 从而让图片更清晰, 便于Tesseract读取: from ...

  2. 刷题之路第三题--Longest Substring Without Repeating Characters

    问题简介:求给定字符串中最长的字符不重复的字符串的长度 问题详解: 给定一个字符串,寻找给定字符串中包含的最长的字符不重复的字符串的长度 注:答案必须是子字符串,不是子序列 是连续的字符不重复的字符串 ...

  3. 用ARX自定义实体

      本文介绍了构造自定义实体的步骤.必须继承的函数和必须注意的事项 1.新建一个从AcDbEntity继承的类,如EntTest,必须添加的头文件: "stdarx.h",&quo ...

  4. js判断空字符串、null、undefined、空格、中文空格

    代码 function isEmpty(obj) { if (obj === null) return true; if (typeof obj === 'undefined') { return t ...

  5. jquery iCheck的全选和获取value

    jQuery iCheck 插件提供高度可定制的复选框和单选按钮(jQuery和Zepto).最新版本1.0.2,有个最新的2.0预览版,但是发布之后没有再更新. 特点:在不同的浏览器和设备(桌面和移 ...

  6. [SCOI2014]方伯伯的OJ

    看到这道题的第一想法就是要用FHQ treap 过了这道题...于是至今尚未成功(华丽的 T 掉了 (╯‵□′)╯︵┻━┻ ).于是附个地址. 然后水一波博客. 题意简介 emmmm...方伯伯脑抽做 ...

  7. Tp5自定义标签

    'taglib_build_in'    => 'cx,tags', // 内置标签库名称(标签使用不必指定标签库名称),以逗号分隔 注意解析顺序 <?php namespace thin ...

  8. win2008 C盘清理

    需要在Windows Server 2008上安装“桌面体验”才能使用磁盘清理工具,安装“桌面体验的”的具体步骤如下:   1. 打开“服务器管理器”——在“功能摘要”下,单击“添加功能”.   2. ...

  9. 22)django-中间件

    一:中间件介绍 django 中的中间件(middleware),在django中,中间件其实就是一个类,在请求到来和结束后, django会根据自己的规则在合适的时机执行中间件中相应的方法. 在dj ...

  10. 如何创建一个标准的Windows服务

    出处:http://www.cnblogs.com/wuhuacong/archive/2009/02/11/1381428.html 如何创建一个标准的Windows服务 在很多时候,我们需要一个定 ...