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实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
JS实现简单日历特效
Jan 03 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
js确定对象类型方法
2012/03/30 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
python遍历目录的方法小结
2016/04/28 Python
python实现最大优先队列
2019/08/29 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
促销活动方案模板
2014/02/24 职场文书
仓库主管岗位职责
2014/03/02 职场文书
铲车司机岗位职责
2014/03/15 职场文书
十佳少年事迹材料
2014/12/25 职场文书
实习指导教师评语
2014/12/30 职场文书
民事起诉书范本
2015/05/19 职场文书
办公用品管理制度
2015/08/04 职场文书
教师听课学习心得体会
2016/01/15 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python