搜索 用户中心
  • 欢迎光临三九网站目录 , 快审50元/站,快审请联系站长QQ:704918986
    当前位置 首页 > 教程收藏 > 特效教程
    jQuery给点赞按钮加一动画效果
        发布时间:2015-10-22 11:33:16    发布作者:admin

    我想各位博主的博客都有点赞功能吧,但是大多数都是按了点赞按钮后只是赞过的数量增加了,而这次这个点赞效果在访客赞过之后会有一个+1的动画效果,真是很赞的一个功能啊。Qdz三九网站目录

    201510161444959791609039.pngQdz三九网站目录

    Qdz三九网站目录

    js代码

    (function ($) {Qdz三九网站目录

        $.extend({Qdz三九网站目录

            tipsBox: function (options) {Qdz三九网站目录

                options = $.extend({Qdz三九网站目录

                    obj: null,  //jq对象,要在那个html标签上显示Qdz三九网站目录

                    str: "+1",  //字符串,要显示的内容;也可以传一段html,如: "+1"Qdz三九网站目录

                    startSize: "12px",  //动画开始的文字大小Qdz三九网站目录

                    endSize: "30px",    //动画结束的文字大小Qdz三九网站目录

                    interval: 600,  //动画时间间隔Qdz三九网站目录

                    color: "red",    //文字颜色Qdz三九网站目录

                    callback: function () { }    //回调函数Qdz三九网站目录

                }, options);Qdz三九网站目录

                $("body").append("" + options.str + "");Qdz三九网站目录

                var box = $(".num");Qdz三九网站目录

                var left = options.obj.offset().left + options.obj.width() / 2;Qdz三九网站目录

                var top = options.obj.offset().top - options.obj.height();Qdz三九网站目录

                box.css({Qdz三九网站目录

                    "position": "absolute",Qdz三九网站目录

                    "left": left + "px",Qdz三九网站目录

                    "top": top + "px",Qdz三九网站目录

                    "z-index": 9999,Qdz三九网站目录

                    "font-size": options.startSize,Qdz三九网站目录

                    "line-height": options.endSize,Qdz三九网站目录

                    "color": options.colorQdz三九网站目录

                });Qdz三九网站目录

                box.animate({Qdz三九网站目录

                    "font-size": options.endSize,Qdz三九网站目录

                    "opacity": "0",Qdz三九网站目录

                    "top": top - parseInt(options.endSize) + "px"Qdz三九网站目录

                }, options.interval, function () {Qdz三九网站目录

                    box.remove();Qdz三九网站目录

                    options.callback();Qdz三九网站目录

                });Qdz三九网站目录

            }Qdz三九网站目录

        });Qdz三九网站目录

    })(jQuery);Qdz三九网站目录

       Qdz三九网站目录

    function niceIn(prop){Qdz三九网站目录

        prop.find('i').addClass('niceIn');Qdz三九网站目录

        setTimeout(function(){Qdz三九网站目录

            prop.find('i').removeClass('niceIn');  Qdz三九网站目录

        },1000);       Qdz三九网站目录

    }Qdz三九网站目录

    $(function () {Qdz三九网站目录

        $("#btn").click(function () {Qdz三九网站目录

            $.tipsBox({Qdz三九网站目录

                obj: $(this),Qdz三九网站目录

                str: "+1",Qdz三九网站目录

                callback: function () {Qdz三九网站目录

                }Qdz三九网站目录

            });Qdz三九网站目录

            niceIn($(this));Qdz三九网站目录

        });Qdz三九网站目录

    });Qdz三九网站目录


    Qdz三九网站目录

    上一篇:返回列表
    最新资讯
    最新收录
    热门资讯