jQuery+ajax实现实用的点赞插件代码

之前给大家总结了jQuery插件开发的两种方式，这里就实践一下，做一款点赞特效插件，先看看效果吧：



废话少说，上代码：

//***扩展对象点赞插件、点赞特效***//
//***Zynblog**//
//***2016-5-11**//
//***用法：jQuery('.praisebtn').praise(options);***//
; (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();
});
}
})(jQuery);

//点赞图标恢复原样
function niceIn(prop) {
prop.find('.praisenum').addClass('niceIn').css("color", "red");
setTimeout(function () {
prop.find('.praisenum').css("color", "#45BCF9").removeClass('niceIn');
}, 1000);
};

用法：在需要用到点赞插件的页面中引入jquery.js、以及这个插件.js，在$（function(){}）中给"[object Object]"注册click事件即可。

HTML:

<span class="praisebtn">
<img src="/Content/images/ico_praise.png" class="praisenum" data-bd-imgshare-binded="1">
（<a href="#" praise-flag="0" data-id="7">2</a>）
//praise-flag="0" 记录点赞标识（是否已赞过）,data-id记录文章id
</span>

jQuery(本站并不强制访客进行注册登录后才能点赞，因此并不限制访客的点赞次数):

//点赞特效+Ajax统计点赞数量
pariseShow: function () {
//使用自定义的点赞特效插件,在zynblog.js前要先引入这个插件
//jquery给暂未生成的标签绑定事件要用on('事件','对象','事件句柄')
jQuery(document).on("click", ".praisebtn", function (e) {
e.preventDefault();
//获取被点赞文章的id praise-flag:0没攒过，1：赞过了
//页面刚生成时，可以从库中确定该用户是否点赞，并为praise-flag属性赋初值
//这里没必要那么严谨，所以初值均为1，(顶多是再在cookie中给个标记)
var praiseFlag = jQuery(this).children('a').attr('praise-flag');
//alert(praiseFlag);
var praiseArtId = jQuery(this).children('a').attr('data-id');
//alert(praiseArtId);

//1. 如果没赞过
if (praiseFlag == 0) {
var curPraise = jQuery(this).children('a');
curPraise.attr('praise-flag', "1");//先把点赞标识的属性值设为1

jQuery(this).praise({
obj: jQuery(this),
str: "+1",
callback: function () {
jQuery.post("/Archives/PraiseStatic", { "artId": praiseArtId }, function (data) {
if (data.Status == 1) {
var praisecount = parseInt(curPraise.text().match(/\d+/));
curPraise.text(curPraise.text().replace(praisecount, praisecount + 1));
} else if (data.Status == 2) {
alert(data.Message);
} else if (data.Status == 0) {
alert(data.Message);
}
});
}
});
niceIn(jQuery(this));
} else if (praiseFlag == 1) {
//2. 如果已经已赞
jQuery("body").append("<span class='praisetip'>您已赞过~</span>");
var tipbox = jQuery(".praisetip");
var left = jQuery(this).offset().left;
var top = jQuery(this).offset().top + jQuery(this).height();
tipbox.css({
"position": "absolute",
"left": left + "px",
"top": top + "px",
"z-index": 9999,
"font-size": "12px",
"line-height": "13px",
"color": "red"
});
tipbox.animate({
"opacity": "0"
}, 1200, function () {
tipbox.remove();
});
}
});
},

下载地址：

jquery.praise.js

您可能感兴趣的文章:

jQuery提示插件qTip2用法分析(支持ajax及多种样式)
jquery ajax请求方式与提示用户正在处理请稍等
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
jQuery ajax dataType值为text json探索分享
jQuery ajaxSubmit 实现ajax提交表单局部刷新
jQuery 中ajax异步调用的四种方式
jquery ajax提交表单数据的两种方式
JQuery AJAX提交中文乱码的解决方案
jquery ajax例子返回值详解
jQuery Ajax文件上传(php)
jquery+ajax+text文本框实现智能提示完整实例