js +1的动画效果

var fnPlusAnimate = function(str, options){
    if (typeof str === 'object') {
        options = str;
        str = undefined;
    }
    var s = str || '+1',
        opt = $.extend({
            style : '',
            target : null,
            align : 'center',
            speed : 'slow',
            stopDist : 50,
            animateDone : function(){}
        }, options || {}),
        $elem = $('<span></span>'),
        $target = $(opt.target),
        offset = $target.offset(),
        width = $target.width(),
        align = opt.align,
        left = offset.left + (align === 'left' ? 0 : align === 'right' ? width : width / 2),
        w, h;

    $elem.text(s).attr('style', opt.style).css({
        'position' : 'absolute',
        'top' : offset.top,
        'font-size' : 24,
        'color' : '#3dbdff',
        'opacity' : 0,
        'z-index' : 4
    }).appendTo($('body'));

    w = $elem.outerWidth(true);
    h = $elem.outerHeight(true);

    $elem.css({
        'opacity' : 1,
        'left' : left - w / 2
    }).animate({
        'top' : offset.top - opt.stopDist,
        'opacity' : 0
    }, opt.speed, function(){
        $elem.remove();
        opt.animateDone.apply(this, arguments);
    });
};

fnPlusAnimate('+1', {
    target : target
});

 

posted on 2016-10-13 10:46  Cosimo  阅读(333)  评论(0编辑  收藏  举报

导航