0

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

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

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

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

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

$.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 回答
0

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

// 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 回答