jquery 插件之 点赞“+1” 特效

一般用户点个赞后，都会有个 +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="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
});
}
}
});
}

　　

​