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)" onclick="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
				});
			}
		}
	});
}

  

?

时间: 2024-10-09 20:22:31

jquery 插件之 点赞“+1” 特效的相关文章

【原创】jQuery插件 - Booklet翻书特效教程(一) 一般设置

jQuery插件 - Booklet翻书特效教程(一) 一般设置 本文由五月雨恋提供,转载请注明出处. 一.宽高(width/height) 1.自定义大小 $(function(){ // 自定义页面大小 单位默认px 注意不要带单位px! $('#mybook1').booklet({ width:  600,// 不要带单位px! height: 200// 不要带单位px! }); }); 2.百分比 $(function(){ // 自定义页面大小 使用百分比 $('#mybook2'

jquery插件jqzoom放大镜插件特效代码分享

原文:jquery插件jqzoom放大镜插件特效代码分享 源代码下载地址:http://www.zuidaima.com/share/1550463469554688.htm 放大镜插件效果是当前电子商务系统的一个不可缺的部分,值得学习哦 代码截图:

jquery简单的tab切换特效插件jquery-tab demo代码下载

原文:jquery简单的tab切换特效插件jquery-tab demo代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463496178688.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

JQuery插件-放大镜特效

一.HTML代码: <div class="demo"> <div id="box"> <div id="small-box"> <div id="float-box"></div> <img src="../images/bimg_big.jpg"/> </div> <div id="big-box&quo

jQuery炫酷3d旋转木马特效插件

这是一款使用TweenMax.js制作的jQuery超酷3D旋转木马特效.该旋转木马特效可以感应鼠标的位置而使旋转木马做出相应的变化,效果非常炫酷. 在线演示:http://www.htmleaf.com/Demo/201502231410.html 下载地址:http://www.htmleaf.com/jQuery/Slideshow-Scroller/201502231409.html

jQuery插件编写及链式编程模型小结

JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQuery插件,然后像使用jQuery那样来操作DOM.  一.jQuery插件开发快速上手 1.jQuery插件模板 关于jQuery插件的编写,我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字,其模板如下: (function($){ $.fn.m

2016年4月最佳的20款 jQuery 插件推荐

这个列表包括20个我们觉得是最有用的免费的 jQuery 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者分享您的意见,或者如果您知道的我们还没有包括的话,请与我们分享在下面的评论部分. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码

241个jquery插件—jquery插件大全

jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典的Slogan是“Write Less, Do more”(写更少的代码,做更多的事情).jQuery是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+). jQue

jQuery插件编写及链式编程模型

jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQuery插件,然后像使用jQuery那样来操作DOM.  一.jQuery插件开发快速上手 1.jQuery插件模板 关于jQuery插件的编写,我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字,其模板如下: