Мы хотим реализовать перелистывание цифр. Я использую плагин Flipcount, в котором мы должны предоставить полный номер изображения в формате .png
. Но моя проблема заключается в том, что нам нужен разрыв между числами, как показано на рис. ниже:
Я использую плагин FlipCounter 1.2. Мой код и конфиг:
$(".total_box").flipCounter({
number:10032463, // the initial number the counter should display, overrides the hidden field
numIntegralDigits:1, // number of places left of the decimal point to maintain
numFractionalDigits:0, // number of places right of the decimal point to maintain
digitClass:"counter-digit", // class of the counter digits
counterFieldName:"counter-value", // name of the hidden field
digitHeight:40, // the height of each digit in the flipCounter-medium.png sprite image
digitWidth:30, // the width of each digit in the flipCounter-medium.png sprite image
imagePath:"../layout/images/flipCounter-medium.png", // the path to the sprite image relative to your html document
easing: true, // the easing function to apply to animations, you can override this with a jQuery.easing method
duration:10, // duration of animations
onAnimationStarted:false, // call back for animation upon starting
onAnimationStopped:false, // call back for animation upon stopping
onAnimationPaused:false, // call back for animation upon pausing
onAnimationResumed:false // call back for animation upon resuming from pause
});
В настоящее время я получаю:
Как добавить пробелы между цифрами?
Добавьте это в свой CSS
.counter-digit {margin: 0px 10px;}
или добавление margin: 0px 10px;
к любому текущему стилю .counter-digit
если он уже присутствует.
padding