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


Posted in Javascript onJuly 06, 2016

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

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

    废话少说,上代码:

//***扩展对象点赞插件、点赞特效***//
//***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

Javascript 相关文章推荐
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 #Javascript
jQuery深拷贝Json对象简单示例
Jul 06 #Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 #Javascript
JS如何判断json是否为空
Jul 06 #Javascript
移动端 一个简单易懂的弹出框
Jul 06 #Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 #Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 #Javascript
You might like
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
php多线程并发实现方法
2016/09/30 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
利用python如何处理nc数据详解
2018/05/23 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
历史学专业推荐信
2013/11/06 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
农村婚礼主持词
2014/03/13 职场文书
个人工作总结范文2014
2014/11/07 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python