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生成GUID的多种算法小结
Aug 18 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
简单实现js放大镜效果
Jul 24 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
php无限遍历目录示例
2014/02/21 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php写的AES加密解密类分享
2014/06/20 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
简单的js表格操作
2016/09/24 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python实现扫描日志关键字的示例
2018/04/28 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
CAD制图设计师自荐信
2014/01/29 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
《恐龙》教学反思
2014/04/27 职场文书
妈妈活动方案
2014/08/15 职场文书
委托书的写法
2014/09/16 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
长城英文导游词
2015/01/30 职场文书
MySQL sql模式设置引起的问题
2022/05/15 MySQL