一般用户点个赞后,都会有个 +1 的特效飘过,用户已经点过赞了,会有“已点过赞”的特效提示

在这里,我们写了一个点赞的插件

//扩展对象点赞插件、点赞特效
//用法:jQuery('.praisebtn').praise(options);//为多元素注册事件时要使用class类名,不能用id
; (function ($) {
$.fn.praise = function (options) {
var defaults = {
obj: null, //jq对象,针对哪个对象使用这个tipsBox函数
str: "+1", //字符串,要显示的内容;也可以传一段html,如: "<b style='font-family:Microsoft YaHei;'>哈哈</b>"
startSize: "10px", //动画开始的文字大小
endSize: "30px", //动画结束的文字大小
interval: 600, //文字动画时间间隔
color: "red", //文字颜色
callback: function () { } //回调函数
};
var opt = $.extend(defaults, options); //合并参数
$("body").append("<span class='num'>" + opt.str + "</span>");
var box = $(".num");
var left = opt.obj.offset().left + opt.obj.width() / 2;//span btn左侧的距离加上自身宽度的一半
var top = opt.obj.offset().top - opt.obj.height();//顶部距离减去自身的高度
box.css({
"position": "absolute",
"left": left + "px",
"top": top + "px",
"z-index": 9999,
"font-size": opt.startSize,
"line-height": opt.endSize,
"color": opt.color
});
box.animate({
"font-size": opt.endSize,
"opacity": "0",
"top": top - parseInt(opt.endSize) + "px"
}, opt.interval, function () {
box.remove();
opt.callback();
});
} $.fn.praised = function (options) {
var defaults = {
obj: null, //jq对象,针对哪个对象使用这个tipsBox函数
str: "您已赞过~", //字符串,要显示的内容;
startSize: "10px", //动画开始的文字大小
endSize: "30px", //动画结束的文字大小
interval: 600, //文字动画时间间隔
color: "red", //文字颜色
callback: function () { } //回调函数
};
var opt = $.extend(defaults, options); //合并参数
$("body").append("<span class='praisetip'>" + opt.str + "</span>");
var tipbox = jQuery(".praisetip");
var left = opt.obj.offset().left + opt.obj.width();//span btn左侧的距离加上自身宽度的一半
var top = opt.obj.offset().top + opt.obj.height();//顶部距离减去自身的高度
tipbox.css({
"position": "absolute",
"left": left + "px",
"top": top + "px",
"z-index": 9999,
"font-size": "12px",
"line-height": "20px",
"color": "red"
});
tipbox.animate({
"opacity": "0"
}, 1200, function () {
tipbox.remove();
});
}
})(jQuery);

  

在html 上

<span class="praisebtn327111">
<a href="javascript:void(0)" onclick="praise('327111','57071','0')"><img src="data:images/zan.png">赞(<span id="praiseCount327111">1</span>)</a>
</span>

在引用点赞功能上,即如果ajax 返回的结果是success,则表示点赞成功,飘过提示+1,反之,则表示已点赞

function praise(msgid,name,count)
{
var datas={"msgid":msgid,"name":name,"count":count}
$.ajax({
type: "post",
url: "/addMsgPraise",
data: datas,
datatype: "text",
success:function(data){
var praisebtn = jQuery(".praisebtn"+msgid);
if(data=="success")
{
praisebtn.praise({
obj:praisebtn,
str: "+1"
});
count ++;
$("#praiseCount"+msgid).html(count);
}else
{
praisebtn.praised({
obj: praisebtn
});
}
}
});
}

  

jquery 插件之 点赞“+1” 特效的更多相关文章

  1. 【原创】jQuery插件 - Booklet翻书特效教程(一) 一般设置

    jQuery插件 - Booklet翻书特效教程(一) 一般设置 本文由五月雨恋提供,转载请注明出处. 一.宽高(width/height) 1.自定义大小 $(function(){ // 自定义页 ...

  2. Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》

    <Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...

  3. Web 开发最有用的50款 jQuery 插件集锦——《综合篇》

    这篇文章是<Web 开发最有用的50款 jQuery 插件集锦>系列的最后一篇,整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件,这些插件按用途主要有以下类别:网 ...

  4. 我利用网上特效开发的Jquery插件

    我利用网上特效开发的Jquery插件 代码如下 (function($){ $.fn.Dialogx = function(options) { var defaults={ Width:" ...

  5. 2016年6月份那些最实用的 jQuery 插件专辑

    jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...

  6. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  7. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  8. jQuery插件编写及链式编程模型小结

    JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...

  9. 40 个让你的网站更加友好的 jQuery 插件

    一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...

随机推荐

  1. 关于CSS中的字体尺寸设置 em rem等

    常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...

  2. UESTC 914 方老师的分身I Dijkstra

    题意:求有向图的往返最短路的最长长度. 分析:求第一次到所有点的距离可以用一次Dijkstra求最短路求出来.考虑回来的路,想想就知道,从每个点回来的路即为将边的方向反转再求一次最短路后的结果. 所以 ...

  3. Codeforces Round #266 (Div.2) B Wonder Room --枚举

    题意:给出一个两边长为a,b的矩形,要求增加a和增加b使a*b>=6*n且a*b最小. 解法:设新的a,b为a1,b1,且设a<b,那么a<=a1<=ceil(sqrt(6*n ...

  4. 实现Maya FEM节点

    准备实现FEM节点. 发现一种让自定义的Locator以及它的变换节点自动命名的方法.代码如下: void FEMSimulationNode::postConstructor() { MFnDepe ...

  5. 001医疗项目-项目框架的搭建(四个maven工程)

    这个项目资料来源于传智播客.用的是ssm框架, 我们首先建立一个working sets里面存放,我们的maven工程. 如下:

  6. 【转】【C#】【Thread】【Task】多线程

    多线程 多线程在4.0中被简化了很多,仅仅只需要用到System.Threading.Tasks.::.Task类,下面就来详细介绍下Task类的使用. 一.简单使用 开启一个线程,执行循环方法,返回 ...

  7. 【转】【WPF】wpf 图片指针处理

    我一直用GDI+做Winform 的基于指针的图片处理,这次下决心全部移到wpf上(主要是显示布局很方便)采用的图片是2512*3307 的大图 830万像素类库基于WritableBitmapEx ...

  8. DotNet二维码操作组件ThoughtWorks.QRCode

    DotNet二维码操作组件ThoughtWorks.QRCode 在生活中有一种东西几乎已经快要成为我们的另一个电子"身份证",那就是二维码.无论是在软件开发的过程中,还是在普通用 ...

  9. wireshark添加ip.id字段

    wireshark添加ip.id字段 为了在多个设备上追踪同一个数据包. 如果是同一个会话,则可以计算延迟, 如sta和应用服务器慢,这种问题,可以根据这个加上ip.id追踪数据到哪里慢了.    

  10. Linux查看系统资源命令

    转载于:http://lxbins.blog.51cto.com/1089997/283663 top:======================================主要参数d:指定更新 ...