- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>jquery 点赞插件 - jq22.com</title>
- <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
- <style>
- </style>
- </head>
- <body>
- <div class="box">
- </div>
- <div class="opera">
- <span id="btn">
<i class="iconfont"></i> 点击
- </span>
- </div>
- <script>
- (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);
- function niceIn(prop){
- prop.find('i').addClass('niceIn');
- setTimeout(function(){
- prop.find('i').removeClass('niceIn');
- },1000);
- }
- $(function () {
- $("#btn").click(function () {
- $.tipsBox({
- obj: $(this),
- str: "+1",
- callback: function () {
- }
- });
- niceIn($(this));
- });
- });
- </script>
- </body>
- </html>