1

Доброго времени суток, прошу помощи в таком вопросе.
Как сверстать блок для прокручивания внутри цифр? Яркий пример тому лайки вконтакте. С помощью картинки с цифрами и изменение ее background-position все получилось.
Но как быть с текстом?

alt text

1 ответ 1

3

css:

<style>
.cntr{
  width:20px;
  height:20px;
  font-size:18px;
  overflow:hidden;
  text-align:center;
  }
</style>

js:

function plus1(cntr)
{
  var cntr=$(cntr),div;
  var i=parseInt(cntr.html());//текущее значение
  if(isNaN(i))return;//анимация не закончилась
  cntr.append(div=$('<div >'+(i+1)+'</div>'));//добавляем следующее число
  cntr.animate({scrollTop: div.offset().top}, //прокручиваем до него
               {
                 duration:600,
                 complete:function(){cntr.html(i+1)}//убираем лишнее после завершения
               });
}

body:

<div class=cntr onclick='plus1(this)'>1</div>

Изложил один из способов. Думаю из кода все ясно.

3
  • расшифруйте пожалуйста var cntr=$(cntr),div; 7 дек 2012 в 13:14
  • Расшифровываю: бесполезные действия :) В предыдущей версии передавал селектор - упустил из виду.
    – KaZaца
    8 дек 2012 в 9:21
  • все остальное понятно, спасибо) 9 дек 2012 в 17:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.