回旧版

我爱导航网_我爱网址导航_网站酷站免费导航,尽在我爱导航!

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

    });

});


文章来自:我爱导航,未经允许不得转载!:首页 > 教程收藏 > 建站经验 » jQuery给点赞按钮加一动画效果

感觉不错,很赞哦! ( )

相关推荐

网友评论