0

いくつかの数字を絵として表示するのが好きです。すべての番号が 1 つの画像に含まれています。

番号ごとにスパンを作成することから始めました。各スパンは異なるクラスを取得するため、スタイル属性「背景位置」を使用して正しい番号の画像を変更できます。

これは私のために働いています。しかし今、私は正しい値までカウントアップするように、この数字に小さなアニメーションを追加したいと思っています。1 つのスパン (数値) に対してこれを行うことはできますが、すべての数値に対してこれを行うにはどうすればよいですか?

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>
4

3 に答える 3

0

これを行う1つの方法を次に示します。確かに、あちこちで効率と読みやすさを改善する余地があります（そのような改善の1つについては、この回答の編集履歴を参照してください:)）。しかし、それはまともなスタートです：

// 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。

于 2013-02-10T00:33:13.623 に答える
0

数日前に別の同様の質問に答えました：

$.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);
于 2013-02-10T00:39:49.140 に答える
0

これは純粋な Javascript では不可能です。

あなたが求めていることは、PHPの GDなどを使用してサーバー側で実行する必要があります。

于 2013-02-10T00:11:46.210 に答える