Показаны номера 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

Yap Я согласен с @elclanrs – yckart

Это не возможно, используя чистый Javascript.

То, о чем вы просите, должно быть выполнено на стороне сервера, используя что-то вроде PHP's GD.

источник

2013-02-10 00:11:46 jungos

OP использует классы css с 'background-position', чтобы использовать спрайты изображений (Google' css image sprites', если вы непосвященны по этому вопросу). –

Изображения все еще создаются чем-то. Я предположил, что OP просил создать динамическое изображение, а не заменять фоновые изображения. – jungos

Вот один из способов сделать это. У него, безусловно, все еще есть место для повышения эффективности и удобочитаемости, кое-где (см. Историю изменений этого ответа для одного такого улучшения :)). Но это достойное начало IMHO:

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

Я ответил другой подобный вопрос несколько дней назад:

$.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);

Update

Если вы действительно хотите использовать изображения, держи:

$.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 как изображение с анимацией

ответ

Смежные вопросы