javascript将数字显示为带动画的图片答案

【问题标题】：javascript display numbers as picture with animationjavascript将数字显示为带动画的图片
【发布时间】：2013-02-09 23:52:39
【问题描述】：

我喜欢将一些数字显示为图片。所有数字都包含在一张图片中。

我开始为每个数字创建一个跨度，每个跨度都有一个不同的类，这样我就可以使用样式属性“背景位置”将图片更改为正确的数字。

这对我有用。但现在我想给这个数字添加一点动画，比如计数到正确的值。我可以对一个跨度（数字）执行此操作，但如何对所有数字执行此操作？

HTML：

    <style>
.digit0 { background-position: 0  0; }
.digit1 { background-position: 0  -120px; }
.digit2 { background-position: 0  -240px; }
.digit3 { background-position: 0  -360px; }
.digit4 { background-position: 0  -480px; }
.digit5 { background-position: 0 -600px; }
.digit6 { background-position: 0 -720px; }
.digit7 { background-position: 0 -840px; }
.digit8 { background-position: 0 -960px; }
.digit9 { background-position: 0 -1080px; }
</style>
</head>
<body>
    <h1>Examples</h1>
    <p> 

<div id="number">here</div>

    </p>
</body>

Javascript：

<script type="text/javascript">
$(document).ready(function(){
    // Your code here
    var dd = "5487";
    dd = dd.replace(/(\d)/g, '<span class="digit0" id="count$1" style="display: inline-block; height: 20px; line-height: 40px; width: 14px; vertical-align: middle; text-align: center; font: 0/0 a; text-shadow: none; background-image: url(../src/jquery.counter-analog.png); color: transparent; margin: 0;"></span>');

    $("#number").html(dd);

    count = $("#count4").attr("id").replace("count", "").toString();

    var i = 0;
    setInterval(function() {
        counter();
    }, 100);

    function counter() {
        if(i < count) {
            i++;    
            $("#count4").attr("class", "digit" + i + "");
        }
    }
});
</script>

【问题讨论】：

你为什么要用图片把事情复杂化？数字是文字...
是的，我同意@elclanrs

标签： javascript jquery

【解决方案1】：

使用纯 Javascript 无法做到这一点。

您所要求的必须使用类似PHP's GD 的东西在服务器端执行。

【讨论】：

OP 正在使用带有 background-position 的 css 类来利用图像精灵（Google css image sprites，如果您不熟悉该主题）。
图像仍然是由某些东西创建的。我以为 OP 要求生成动态图像，而不是交换背景图像。

【解决方案2】：

这是一种方法。它当然仍然有效率和易读性改进的空间，到处都是（请参阅此答案的编辑历史以获取此类改进:)）。但恕我直言，这是一个不错的开始：

// goal digits
var dd = '5487';
// separate digits
var digits = dd.split( '' );
// set some animation interval
var interval = 100;

// create spans for each digit,
// append to div#number and initialize animation
digits.forEach( function( value, index ) {
    // create a span with initial conditions
    var span = $( '<span>', {
        'class': 'digit0',
        'data': {
            'current': 0,
            'goal' : value
        }
    } );
    // append span to the div#number
    span.appendTo( $( 'div#number' ) );
    // call countUp after interval multiplied by the index of this span
    setTimeout( function() { countUp.call( span ); }, index * interval );
} );

// count animation function
function countUp()
{
    // the current span we're dealing with
    var span = this;
    // the current value of the span
    var current = span.data( 'current' );
    // the end goal digit of this span
    var goal = span.data( 'goal' );

    // increment the digit, if we've not reached the goal yet
    if( current < goal )
    {
        ++current;
        span.attr( 'class', 'digit' + current );
        span.data( 'current', current );

        // call countUp again after interval
        setTimeout( function() { countUp.call( span ); }, interval );
    }
}

See it in action on jsfiddle

要改变动画的速度，改变interval的值。

【讨论】：

非常感谢。如何更改此脚本，使其从“0”计数到目标“值”？ 请看这里： jsfiddle.net/bBadM

【解决方案3】：

几天前我已经回答了另一个类似的问题：

$.fn.increment = function (from, to, duration, easing, complete) {
    var params = $.speed(duration, easing, complete);
    return this.each(function(){
        var self = this;
        params.step = function(now) {
            self.innerText = now << 0;
        };

        $({number: from}).animate({number: to}, params);
    });
};

$('#count').increment(0, 1337);

更新

如果你真的想用图片，就拿这个：

$.fn.increment = function (x, y, from, to, duration, easing, complete) {
    var params = $.speed(duration, easing, complete);
    return this.each(function(){
        var self = this;
        params.step = function(now) {
            self.style.backgroundPosition = x * Math.round(now) + 'px ' + y * Math.round(now) + 'px';
        };

        $({number: from}).animate({number: to}, params);
    });
};

$('#count').increment(0, 120, 9);

【讨论】：