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 相关文章推荐
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
element-ui中按需引入的实现
Dec 25 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
React服务端渲染原理解析与实践
Mar 04 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购物网站支付paypal使用方法
2010/11/28 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
SVG实现时钟效果
2018/07/17 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
Vue实现简单分页器
2018/12/29 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
python django 实现验证码的功能实例代码
2017/05/18 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Python中Selenium模块的使用详解
2020/10/09 Python
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
小学家长会邀请函
2014/01/23 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
社会公德演讲稿
2014/05/20 职场文书
大学生党校培训心得体会
2014/09/11 职场文书