js点赞浮动特效
js自己封装的库;
(function($) {
$.extend({
tipsBox: function(options) {
options = $.extend({
obj: null, //jq对象,要在那个html标签上显示
str: "+1", //字符串,要显示的内容;也可以传一段html,如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
startSize: "12px", //动画开始的文字大小
endSize: "30px", //动画结束的文字大小
interval: 600, //动画时间间隔
color: "red", //文字颜色
callback: function() {} //回调函数
}, options);
$("body").append("<span class='num'>" + options.str + "</span>");
var box = $(".num");
var left = options.obj.offset().left + options.obj.width() / 2;
var top = options.obj.offset().top - options.obj.height();
box.css({
"position": "absolute",
"left": left + "px",
"top": top + "px",
"z-index": 9999,
"font-size": options.startSize,
"line-height": options.endSize,
"color": options.color
});
box.animate({
"font-size": options.endSize,
"opacity": "0",
"top": top - parseInt(options.endSize) + "px"
}, options.interval, function() {
box.remove();
options.callback();
});
}
});
})(jQuery);
使用方法:
$.tipsBox({
obj: $("#zans"),
str: "+1",
callback: function() {}
});
js点赞浮动特效的更多相关文章
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 案例:用JS实现放大镜特效
案例:用JS实现放大镜特效 案例:用JS实现放大镜特效
- 电力项目十三--js添加浮动框
修改page/menu/loading.jsp页面 首先,页面中引入浮动窗样式css <!-- 浮动窗口样式css begin --> <style type="text/ ...
- js页面载入特效如何实现
js页面载入特效如何实现 一.总结 一句话总结:可以加选择器(里面的字符串)作为参数,这样函数就可以针对不同选择器,就很棒了. 1.特效的原理是什么? 都是通过标签的位置和样式来实现特效的. 二.js ...
- 前端小插件之手写js循环滚动特效
很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...
- 原生js实现架子鼓特效
这是代码完成的效果,按下abcd会出现对应的架子鼓音乐的效果. 简单的介绍下代码思路,html和css部分就不多说了. 重要的是js部分. 大致是这样的, 首先获取到所有的按钮为一个数组,然后遍历整个 ...
- ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件(二)
1. 为啥要做这个点赞插件? praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...
- ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件(二)
1. 为啥要做这个点赞插件? praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...
- JS框架_(JQuery.js)点赞按钮动画
百度云盘 传送门 密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...
随机推荐
- POJ 3666 Making the Grade【DP】
读题堪忧啊,敲完了才发现理解错了..理解题必须看样例啊!! 题目链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=110495#pro ...
- HDU 2050 【dp】【简单数学】
题意: 中文. 思路: 不难发现数学规律是这样的,每次增加的划分区域的数量是每次增加的交点的数量再加一.然后就总结出了递推公式. #include<stdio.h> ]; int main ...
- MongoDB学习day08--mongoose预定义修饰符和getter、setter修饰符
一.mongoose预定义修饰符 lowercase. uppercase . trim var UserSchema=mongoose.Schema({ name:{ type:String, tr ...
- maven之发布项目到nexus【clean deploy命令】
原文:http://m.blog.csdn.net/article/details?id=49667971 当我们的项目开发完成以后,可能要进行发布(如果是独立的项目,就不需要发布啦,如果是模块项目, ...
- oracle rac 安装错误整理。
今天是2014.05.26,离别N久的博客今天继续使用. 近期一直忙着离职.入职另外加上家的网一直没有交费,弄的自己開始不那么安稳.学习就是须要一种心情平静.内心稳妥的去进行. 因换笔记本,特须要又一 ...
- 蚂蜂窝VS穷游最世界-自由行类App分析
很多其它内容请关注博客: http://www.china10s.com/blog/? p=150 一.产品概述 体验环境: 机型:iPhone 6 型号:64G版 系统:iOS9.2 蚂蜂窝APP版 ...
- Office WORD里面打字,后面的字自动被删除怎么办
word或其他编辑器里打字以后其后面的字就被自动删除了-解决方案 2011-09-26 14:52:09| 分类: 电脑维护|字号 订阅 解决方法: 再按一下 Insert键 就OK啦 今天有 ...
- SpringMVC+Hibernate+Junit4+json基本框架近乎0配置
公司是做APP开发的,须要后台来提供接口,于是乎,这个任务就交给我,经过重复的尝试,学习和參考别人的demo,最终搭出自己还算惬意的框架.SpringMVC+Sping3+Hibernate4+Jun ...
- Swift String 一些经常用法
直接上代码 //字符串 //1 推断字符串是否为空 var test1Str="" var test1Str2:String = String(); println("t ...
- 【bzoj2152】【聪聪可可】【点分治】
[问题描写叙述] 聪聪和可但是兄弟俩.他们俩常常为了一些琐事打起来,比如家中仅仅剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(但是他们家仅仅有一台电脑)--遇到这样的问题,普通情况下石头剪刀布就好 ...