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="data: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
});
}
}
});
}
jquery 插件之 点赞“+1” 特效的更多相关文章
- 【原创】jQuery插件 - Booklet翻书特效教程(一) 一般设置
jQuery插件 - Booklet翻书特效教程(一) 一般设置 本文由五月雨恋提供,转载请注明出处. 一.宽高(width/height) 1.自定义大小 $(function(){ // 自定义页 ...
- Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
<Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...
- Web 开发最有用的50款 jQuery 插件集锦——《综合篇》
这篇文章是<Web 开发最有用的50款 jQuery 插件集锦>系列的最后一篇,整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件,这些插件按用途主要有以下类别:网 ...
- 我利用网上特效开发的Jquery插件
我利用网上特效开发的Jquery插件 代码如下 (function($){ $.fn.Dialogx = function(options) { var defaults={ Width:" ...
- 2016年6月份那些最实用的 jQuery 插件专辑
jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...
- Lazy Load, 延迟加载图片的 jQuery 插件.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- 40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...
随机推荐
- 关于CSS中的字体尺寸设置 em rem等
常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...
- UESTC 914 方老师的分身I Dijkstra
题意:求有向图的往返最短路的最长长度. 分析:求第一次到所有点的距离可以用一次Dijkstra求最短路求出来.考虑回来的路,想想就知道,从每个点回来的路即为将边的方向反转再求一次最短路后的结果. 所以 ...
- Codeforces Round #266 (Div.2) B Wonder Room --枚举
题意:给出一个两边长为a,b的矩形,要求增加a和增加b使a*b>=6*n且a*b最小. 解法:设新的a,b为a1,b1,且设a<b,那么a<=a1<=ceil(sqrt(6*n ...
- 实现Maya FEM节点
准备实现FEM节点. 发现一种让自定义的Locator以及它的变换节点自动命名的方法.代码如下: void FEMSimulationNode::postConstructor() { MFnDepe ...
- 001医疗项目-项目框架的搭建(四个maven工程)
这个项目资料来源于传智播客.用的是ssm框架, 我们首先建立一个working sets里面存放,我们的maven工程. 如下:
- 【转】【C#】【Thread】【Task】多线程
多线程 多线程在4.0中被简化了很多,仅仅只需要用到System.Threading.Tasks.::.Task类,下面就来详细介绍下Task类的使用. 一.简单使用 开启一个线程,执行循环方法,返回 ...
- 【转】【WPF】wpf 图片指针处理
我一直用GDI+做Winform 的基于指针的图片处理,这次下决心全部移到wpf上(主要是显示布局很方便)采用的图片是2512*3307 的大图 830万像素类库基于WritableBitmapEx ...
- DotNet二维码操作组件ThoughtWorks.QRCode
DotNet二维码操作组件ThoughtWorks.QRCode 在生活中有一种东西几乎已经快要成为我们的另一个电子"身份证",那就是二维码.无论是在软件开发的过程中,还是在普通用 ...
- wireshark添加ip.id字段
wireshark添加ip.id字段 为了在多个设备上追踪同一个数据包. 如果是同一个会话,则可以计算延迟, 如sta和应用服务器慢,这种问题,可以根据这个加上ip.id追踪数据到哪里慢了.
- Linux查看系统资源命令
转载于:http://lxbins.blog.51cto.com/1089997/283663 top:======================================主要参数d:指定更新 ...