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

发布时间：2020-12-15 23:25:31 所属栏目：百科来源：网络整理

导读：之前给大家总结了jQuery插件开发的两种方式，这里就实践一下，做一款点赞特效插件，先看看效果吧：废话少说，上代码：哈哈 " startSize: "10px",//动画开始的文字大小 endSize: "30px",//动画结束的文字大小 interval: 600,//文字动画时间间隔 color: "red

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

废话少说，上代码：

哈哈" 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:

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();
});
}
});
},

下载地址：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!