<!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. VMware下CentOS7设置网络以及修改系统语言

    1.在VMware里,依次点击”编辑“ - ”虚拟网络编辑器“,如下图,我选择的是NAT模式 为了能够使用静态IP,这里不要勾选”使用本地DHCP服务将IP分配给虚拟机“这个选项.然后是配置子网ip, ...

  2. 3D中的旋转变换

    相比 2D 中的旋转变换,3D 中的旋转变换复杂了很多.关于 2D 空间的旋转,可以看这篇文章.本文主要粗略地探讨一下 3D 空间中的旋转. 旋转的要素 所谓旋转要素就是说,我们只有知道了这些条件,才 ...

  3. 【转】Python模块学习 - fnmatch & glob

    [转]Python模块学习 - fnmatch & glob 介绍 fnmatch 和 glob 模块都是用来做字符串匹配文件名的标准库. fnmatch模块 大部分情况下使用字符串匹配查找特 ...

  4. Linux kernel学习-内存管理【转】

    转自:https://zohead.com/archives/linux-kernel-learning-memory-management/ 本文同步自(如浏览不正常请点击跳转):https://z ...

  5. python骚操作之...

    python中的Ellipsis对象.写作:- 中文解释:省略 该对象bool测试是为真 用途: 1.用来省略代码,作用类似于pass的一种替代方案. from collections.abc imp ...

  6. HTTP笔记01-http相关的基础知识

    这个系列文章是阅读<图解HTTP>后写下的笔记 当我们在浏览器输入url,点击回车后,浏览器显示我们需要的web页面,那么,这个界面是如何产生的? 根据浏览器地址中输入的url,浏览器从相 ...

  7. configparser模块--配置文件

    该模块适用于配置文件的格式与windows ini文件类似,可以包含一个或多个节(section),每个节可以有多个参数(键=值). 创建文件 import configparser config = ...

  8. windows类书的学习心得

    原文网址:http://www.blogjava.net/sound/archive/2008/08/21/40499.html 现在的计算机图书发展的可真快,很久没去书店,昨日去了一下,真是感叹万千 ...

  9. xtrabackup

    mysqldump备份方式是采用逻辑备份,其最大的缺陷就是备份和恢复速度都慢,对于一个小于50G的数据库而言,这个速度还是能接受的,但如果数据库非常大,那再使用mysqldump备份就不太适合了.而使 ...

  10. 增加一台web机注意事项

    2017年4月18日 15:23:57 星期二 增加一台web机时, 先不要挂载进lb 1. 需要将此机器的ip加入到其它服务的白名单内: 数据库, 缓存, 第三方接口等 2. 绑定hosts, 点点 ...