jquery 插件之 点赞“+1” 特效

一般用户点个赞后，都会有个 +1 的特效飘过，用户已经点过赞了，会有“已点过赞”的特效提示

在这里，我们写了一个点赞的插件

//扩展对象点赞插件、点赞特效
//用法：jQuery('.praisebtn').praise(options);//为多元素注册事件时要使用class类名，不能用id
; (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();
        });
    }
    
    $.fn.praised = function (options) {
        var defaults = {
            obj: null, //jq对象，针对哪个对象使用这个tipsBox函数
            str: "您已赞过~", //字符串，要显示的内容;
            startSize: "10px", //动画开始的文字大小
            endSize: "30px",  //动画结束的文字大小
            interval: 600, //文字动画时间间隔
            color: "red",  //文字颜色
            callback: function () { }  //回调函数
        };
        var opt = $.extend(defaults, options);  //合并参数
        $("body").append("<span class='praisetip'>" + opt.str + "</span>");
        var tipbox = jQuery(".praisetip");
        var left = opt.obj.offset().left + opt.obj.width();//span btn左侧的距离加上自身宽度的一半
        var top = opt.obj.offset().top + opt.obj.height();//顶部距离减去自身的高度
        tipbox.css({
            "position": "absolute",
            "left": left + "px",
            "top": top + "px",
            "z-index": 9999,
            "font-size": "12px",
            "line-height": "20px",
            "color": "red"
        });
        tipbox.animate({
            "opacity": "0"
        }, 1200, function () {
            tipbox.remove();
        });
    }
})(jQuery);

　　

在html 上

<span class="praisebtn327111">
	<a href="javascript:void(0)" οnclick="praise('327111','57071','0')"><img src="images/zan.png">赞(<span id="praiseCount327111">1</span>)</a>
</span>

 

在引用点赞功能上，即如果ajax 返回的结果是success，则表示点赞成功，飘过提示+1，反之，则表示已点赞

function praise(msgid,name,count) 
{
	var datas={"msgid":msgid,"name":name,"count":count}
	$.ajax({
		type: "post",
		url: "/addMsgPraise",
		data: datas,
		datatype: "text",
		success:function(data){
			var praisebtn = jQuery(".praisebtn"+msgid);
			if(data=="success")
			{
				praisebtn.praise({
					obj:praisebtn,
					str: "+1"
				});
				count ++;
				$("#praiseCount"+msgid).html(count);
			}else
			{
				praisebtn.praised({
					obj: praisebtn
				});
			}
		}
	});
}

　　

​