第二目錄

第二目錄

jQuery給點贊按鈕加一動畫效果

我想各位博主的博客都有點贊功能吧,但是大多數都是按了點贊按鈕后只是贊過的數量增加了,而這次這個點贊效果在訪客贊過之后會有一個+1的動畫效果,真是很贊的一個功能啊。

201510161444959791609039.png

js代碼

(function ($) {

    $.extend({

        tipsBox: function (options) {

            options = $.extend({

                obj: null,  //jq對象,要在那個html標簽上顯示

                str: "+1",  //字符串,要顯示的內容;也可以傳一段html,如: "+1"

                startSize: "12px",  //動畫開始的文字大小

                endSize: "30px",    //動畫結束的文字大小

                interval: 600,  //動畫時間間隔

                color: "red",    //文字顏色

                callback: function () { }    //回調函數

            }, options);

            $("body").append("" + options.str + "");

            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));

    });

});


文章來自:第二導航,未經允許不得轉載?。?a href="http://www.westcoasturbanballroomgents.com/">首頁 > 教程收藏 > 建站經驗 » jQuery給點贊按鈕加一動畫效果

感覺不錯,很贊哦! ( )

相關推薦