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 Event学习第三章 早期的事件处理程序
Feb 07 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
Vue.js实现列表清单的操作方法
Nov 15 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
javascript实现移动端上传图片功能
Aug 18 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
小程序云开发实战小结
2018/10/25 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
Python压缩和解压缩zip文件
2015/02/14 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
如何理解python面向对象编程
2020/06/01 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
最好的商品表达自己:Cafepress
2019/09/04 全球购物
法学专业个人求职信
2013/09/26 职场文书
家长对孩子的评语
2014/04/18 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
办公室管理规章制度
2015/08/04 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers