<em id="tgrok"><div id="tgrok"><progress id="tgrok"></progress></div></em>

  1. <label id="tgrok"></label>
      <var id="tgrok"><label id="tgrok"><u id="tgrok"></u></label></var>
      <table id="tgrok"></table>
          1. 回舊版

            愛導航

            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.zylhcdls.com/">首頁 > 教程收藏 > 建站經驗 » jQuery給點贊按鈕加一動畫效果

            感覺不錯,很贊哦! ( )

            相關推薦