javascript显示数字如图片与动画

我喜欢显示一些数字作为图片。所有数字都包含在一张照片中。javascript显示数字如图片与动画

我开始为每个数字创建一个范围，每个范围获得一个不同的类，以便我可以使用样式属性“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>

来源

2013-02-09 Simon

你为什么要复杂化有图片的东西？数字是文字... – elclanrs 2013-02-10 00:06:31

邑我同意@elclanrs – yckart 2013-02-10 00:36:09

这是不可能使用纯JavaScript。

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

来源

2013-02-10 00:11:46 jungos

OP正在使用具有'background-position'的css类来利用图像精灵（如果您对这个主题不熟悉，则使用Google'css图像精灵'）。 – 2013-02-10 00:39:39

图片仍然由某些东西创建。我认为OP是要求动态图像生成，而不是交换背景图像。 – jungos 2013-02-10 00:48:43

以下是一种方法。它当然还有提高效率和易读性的空间（请参阅此答案的编辑历史记录以获得这样的改进:)）。但它是一个不错的开始恕我直言：

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

来源

2013-02-10 00:33:13

非常感谢。我怎样才能改变这个脚本，使它从'0'到目标'值'？ **请看这里：** http://jsfiddle.net/bBadM/ – Simon 2013-02-10 11:10:45

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

$.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-10 00:39:49 yckart

javascript显示数字如图片与动画

回答

相关问题