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

前端技术 2023/09/01 JavaScript

之前给大家总结了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

本文地址:https://www.stayed.cn/item/1842

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。