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 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
javascript类继承机制的原理分析
Sep 12 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
JavaScript实现五子棋小游戏
Oct 26 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中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
php错误日志简单配置方法
2016/07/11 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
基于vue展开收起动画的示例代码
2018/07/05 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
Python pickle模块用法实例
2015/04/14 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python实现按日期归档文件
2021/01/30 Python
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
高中语文教学反思范文
2016/02/16 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
pycharm代码删除恢复的方法
2021/06/26 Python
webpack的移动端适配方案小结
2021/07/25 Javascript