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 原型对 ...
随机推荐
- 单调队列应用--BZOJ 3831 Little Bird
3831: [Poi2014]Little Bird Time Limit: 20 Sec Memory Limit: 128 MB Description In the Byteotian Lin ...
- sublime Text 2 安装Sublime Package Control
Sublime Text 2 安装 Sublime Package Control,通过 Sublime Package Control,安装.升级和卸载 Package. 安装 Package Co ...
- Junit使用GroboUtils进行多线程测试
写过Junit单元测试的同学应该会有感觉,Junit本身是不支持普通的多线程测试的,这是因为Junit的底层实现上,是用System.exit退出用例执行的.JVM都终止了,在测试线程启动的其他线程自 ...
- poj 1411 Calling Extraterrestrial Intelligence Again(超时)
Calling Extraterrestrial Intelligence Again Time Limit: 1000MS Memory Limit: 65536K Total Submissi ...
- bootstrap modal的data-dismiss属性
<button type="button" class="btn default" data-dismiss="modal">关 ...
- 导航程序调试1---MFC应用以及数据显示程序
问题 error C2664: "BuildCommDCBW": 不能将参数 1 从"char *"转换为"LPCWSTR"经常出现这样的错 ...
- How to get date from OAMessageDateFieldBean
OAMessageDateFieldBean dateFromBean = (OAMessageDateFieldBean)webBean.findChildRecursive("pRece ...
- Java开发环境的搭建
确定自己的操作系统版本并下载安装JDK 1.下载JDK windows系统: 右键我的电脑->属性;如下图: 2.下载JDK 下载地址:http://www.oracle.com/index.h ...
- 修改 dispatchTouchEvent方法 来处理事件冲突
PagerIndicator把事件给拦截了 我修改了他的 dispatchTouchEvent方法 请求他爹和他祖宗不要拦截我的事件 根据事件分发机制 dispatchTouchEvent-> ...
- iOS开发UI篇—popoverController简单介绍(ipad)
一.简单介绍 1.什么是UIPopoverController 是iPad开发中常见的一种控制器(在iPhone上不允许使用) 跟其他控制器不一样的是,它直接继承自NSObject,并非继承自UIVi ...