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() {}
});