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中的其他对象
Jan 16 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
canvas绘制环形进度条
Feb 23 Javascript
Angular排序实例详解
Jun 28 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
php jsonp单引号转义
2014/11/23 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
php5与php7的区别点总结
2019/10/11 PHP
JS自调用匿名函数具体实现
2014/02/11 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
Ionic快速安装教程
2016/06/03 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
python返回昨天日期的方法
2015/05/13 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
python正则分析nginx的访问日志
2017/01/17 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
numpy中索引和切片详解
2017/12/15 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
党员干部公开承诺书
2014/03/26 职场文书
销售队伍口号
2014/06/11 职场文书
党员自我剖析材料
2014/08/31 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
党支部考察意见范文
2015/06/02 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书