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点赞浮动特效的更多相关文章

  1. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 案例:用JS实现放大镜特效

    案例:用JS实现放大镜特效 案例:用JS实现放大镜特效

  3. 电力项目十三--js添加浮动框

    修改page/menu/loading.jsp页面 首先,页面中引入浮动窗样式css <!-- 浮动窗口样式css begin --> <style type="text/ ...

  4. js页面载入特效如何实现

    js页面载入特效如何实现 一.总结 一句话总结:可以加选择器(里面的字符串)作为参数,这样函数就可以针对不同选择器,就很棒了. 1.特效的原理是什么? 都是通过标签的位置和样式来实现特效的. 二.js ...

  5. 前端小插件之手写js循环滚动特效

    很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...

  6. 原生js实现架子鼓特效

    这是代码完成的效果,按下abcd会出现对应的架子鼓音乐的效果. 简单的介绍下代码思路,html和css部分就不多说了. 重要的是js部分. 大致是这样的, 首先获取到所有的按钮为一个数组,然后遍历整个 ...

  7. ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件(二)

    1. 为啥要做这个点赞插件?    praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...

  8. ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件(二)

    1. 为啥要做这个点赞插件?    praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...

  9. JS框架_(JQuery.js)点赞按钮动画

    百度云盘 传送门 密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...

随机推荐

  1. 一份关于webpack2和模块打包的新手指南(二)

    插件 我们已经看到一个内置的webpack插件的例子,在npm run build脚本中调用的webpack -p命令就是使用webpack附带的UglifyJsPlugin插件以生产模式压缩打包文件 ...

  2. POJ 2104 K-th Number【整体二分 + 树状数组】

    本来只是想学一下CDQ,还是先把整体二分搞懂一点. 这题窝几个月前分别用划分树,树套树,主席树和挑战上介绍的分桶法实现了一发(然而现在都忘得差不多了) 最快的是划分树,其次是主席树,然后是树套树,还有 ...

  3. POJ 1422【最小路覆盖数】

    题意: 背景: 小镇有n个路口,空降兵可以在任意路口降落.有m条通往别的路口的单向边,但是不会出现循环. 问最少空降多少个士兵可以走完所有路口. 数据输入: 测试组数 t 每组有: 路口数 n 边数 ...

  4. 240.Search in a 2D Matrix II

    /* * 240.Search in a 2D Matrix II * 2016-6-17by Mingyang * From left-bottom to right-top * 他这道题目虽说是用 ...

  5. java下XML与JSON互相转换的Utils类

    原文:http://heipark.iteye.com/blog/1394844 需要json-lib-2.1-jdk15.jar和xom-1.2.5.jar,maven pom.xml如下: < ...

  6. 鼠标放上去Div旋转特效代码

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. C# 中用DES 对称Key,IV 加密,前端crypto.js 解密

    1.服务器端代码 #region ========加密======== /// <summary> /// 加密 /// </summary> /// <param na ...

  8. 那条linq语句为啥这么慢

    目前所在的项目大量使用了linq,结果有个地方出现了严重的性能问题.一个统计需要3.40秒.头头焦头烂额之际,也让我看看. 我向来喜欢性能调优,自诩编码极为注重性能.曾几何时,也动不动就把性能挂在嘴边 ...

  9. RabbitMQ常用命令、管理界面

    1.运行CMD,cd切换到RabbitMQ安装目录sbin下E:\Program Files\RabbitMQ Server\rabbitmq_server-3.7.2\sbin 执行 rabbitm ...

  10. HBase 数据迁移

    最近两年负责 HBase,经常被问到一些问题, 本着吸引一些粉丝.普及一点HBase 知识.服务一点阅读人群的目的,就先从 HBase 日常使用写起,后续逐渐深入数据设计.集群规划.性能调优.内核源码 ...