javascript將數字顯示為帶有動畫的圖片

Question

我喜歡將一些數字顯示為圖片。 所有數字都包含在一張圖片中。

我首先為每個數字創建一個跨度，每個跨度得到一個不同的類，以便可以使用樣式屬性“ background-position”將圖片更改為正確的數字。

這對我有用。 但是，現在我想在此數字上添加一些動畫，例如計數到正確的值。 我可以為一個跨度（數字）執行此操作，但是如何為所有數字執行此操作？

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>

Answer 1

使用純Javascript是不可能的。

您要求的內容必須在服務器端使用PHP的GD來執行。

Answer 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 );
    }
}

在jsfiddle上看到它的實際效果

要更改動畫的速度，請更改interval的值。

Answer 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);

javascript將數字顯示為帶有動畫的圖片

問題描述

3 個解決方案

解決方案1
0 2013-02-10 00:11:46

解決方案2
0 2013-02-10 00:33:13

解決方案3
0 2013-02-10 00:39:49

javascript將數字顯示為帶有動畫的圖片

問題描述

3 個解決方案

解決方案1 0 2013-02-10 00:11:46

解決方案2 0 2013-02-10 00:33:13

解決方案3 0 2013-02-10 00:39:49

解決方案1
0 2013-02-10 00:11:46

解決方案2
0 2013-02-10 00:33:13

解決方案3
0 2013-02-10 00:39:49