jQuery点赞+1动画效果

WEB评论1,24370字数 906阅读模式

一款jQuery网页点赞加1动画效果,鼠标点击按钮的时候,会有一个+1的文字向上漂浮渐渐消失的动画效果。

jQuery点赞+1动画效果

代码如下:

<script type='text/javascript'>
    /* 点赞时+1动画 */
    (function($) {
        $.extend({
            tipsBox: function(options) {
                options = $.extend({
                    obj: null,
                    str: "+1",
                    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);
    $(function() {
        $(".dingzan").click(function() {
            $.tipsBox({
                obj: $(this),
                str: "+1",
                callback: function() {}
            });
        })
    });
</script>

本文已通过「原本」原创作品认证,转载请注明文章出处及链接。

WEB最后更新:2022-11-10
夏日阳光
  • 本文由 夏日阳光 发表于 2019年4月7日
  • 本文为夏日阳光原创文章,转载请务必保留本文链接:https://www.pieruo.com/50.html
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证