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 Window及document对象详细整理
Jan 12 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
小程序实现多选框功能
Oct 30 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
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 输出简单动态WAP页面
2009/06/09 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
Python生成随机密码的方法
2017/06/16 Python
Python 闭包的使用方法
2017/09/07 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python匿名函数及应用示例
2019/04/09 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
老师给学生的表扬信
2014/01/17 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
林肯就职演讲稿
2014/05/19 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
小学生安全保证书
2015/05/09 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书