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，如: "哈哈" startSize: "10px",//动画开始的文字大小 endSize: "30px",//动画结束的文字大小 interval: 600,//文字动画时间间隔 color: "red",//文字颜色 callback: function () { } //回调函数 }; var opt = $.extend(defaults,options); //合并参数 $("body").append("" + opt.str + ""); 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:

） //praise-flag="0" 记录点赞标识（是否已赞过）,data-id记录文章id

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

//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("您已赞过~");
var tipbox = jQuery(".praisetip");
var left = jQuery(this).offset().left;
var top = jQuery(this).offset().top + jQuery(this).height();
tipbox.css({
"position": "absolute","font-size": "12px","line-height": "13px","color": "red"
});
tipbox.animate({
"opacity": "0"
},1200,function () {
tipbox.remove();
});
}
});
},

下载地址：

原文链接：https://www.f2er.com/ajax/47417.html

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

猜你在找的Ajax相关文章