[原创]jquery 插件之 点赞“+1” 特效_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
2
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 2105 | 回复: 1   主题: [原创]jquery 插件之 点赞“+1” 特效        上一篇   下一篇 
panpan.nie
注册用户
等级:大校
经验:4754
发帖:217
精华:2
注册:1970-1-1
状态:离线
发送短消息息给panpan.nie 加好友    发送短消息息给panpan.nie 发消息
发表于: IP:您无权察看 2016-6-24 11:59:06 | [全部帖] [楼主帖] 楼主

一般用户点个赞后,都会有个 +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)" click="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
				});
			}
		}
	});
}





赞(0)    操作        顶端 
_chen
版主
等级:中校
经验:2139
发帖:39
精华:0
注册:2013-8-23
状态:离线
发送短消息息给_chen 加好友    发送短消息息给_chen 发消息
发表于: IP:您无权察看 2016-12-26 10:32:57 | [全部帖] [楼主帖] 2  楼

不错的效果,赞一个



赞(0)    操作        顶端 
总帖数
2
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论