zoukankan      html  css  js  c++  java
  • 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
    });
  • 相关阅读:
    HTML静态网页--JavaScript-简介
    html 表单 css样式表
    html 表格 嵌套 frameset 热点
    触发器
    存储过程 if 复习 while 学习
    变量运算符
    SQL数学函数
    SQL数据库基础
    批處理文章引用
    对Excel操作(VBA)
  • 原文地址:https://www.cnblogs.com/naokr/p/5955542.html
Copyright © 2011-2022 走看看