在我的网站上，我有一个自动计数器，可以从我的数据库中检索数据，现在以图形方式使其更美观我想使用一个模拟分割翻页显示的脚本，就像在机场或火车站一样。
我使用了从http://www.jqueryscript.net/text/Airport-Like-Text-Flip-Animation-with-jQuery-CSS3-splitFlap.html
获取的以下脚本JS
/* Split Flap Display for jQuery */
(function ($) {
'use strict';
/***************************************************************************
* Tools
**************************************************************************/
// Date.now
Date.now = (Date.now || function () {
return (new Date()).getTime();
});
(function () {
var lastTime = 0;
var vendors = [ 'ms', 'moz', 'webkit', 'o' ];
for ( var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x ) {
window.requestAnimationFrame = window[ vendors[ x ] + 'RequestAnimationFrame' ];
window.cancelAnimationFrame = window[ vendors[ x ] + 'CancelAnimationFrame' ] || window[ vendors[ x ] + 'CancelRequestAnimationFrame' ];
}
if ( window.requestAnimationFrame === undefined ) {
window.requestAnimationFrame = function (callback, element) {
var currTime = Date.now(), timeToCall = Math.max(0, 16 - ( currTime - lastTime ));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
window.cancelAnimationFrame = window.cancelAnimationFrame || function (id) {
window.clearTimeout(id);
};
}());
// Bind
var bind = function (method, instance) {
return function () {
return method.apply(instance, arguments);
};
};
/***************************************************************************
* Letter
**************************************************************************/
/**
* Letter Constructor
*
* @param settings
* @constructor
*/
function Letter(settings) {
this.settings = settings;
this.domObject = document.createElement('div');
$(this.domObject)
.css({
'-webkit-transform-style': 'preserve-3d',
'-moz-transform-style': 'preserve-3d',
'-ms-transform-style': 'preserve-3d',
'transform-style': 'preserve-3d'
})
.addClass("char");
this.upperObject = document.createElement('div');
this.lowerObject = document.createElement('div');
this.flippingObject = document.createElement('div');
var c = {
'background-image': 'url(' + this.settings.image + ')'
};
if ( this.settings.imageSize != '' ) {
c[ 'background-size' ] = this.settings.imageSize;
}
$(this.upperObject)
.width(this.settings.charWidth)
.height(this.settings.charHeight >> 1)
.css(c)
.addClass("upper");
$(this.lowerObject)
.width(this.settings.charWidth)
.height(this.settings.charHeight >> 1)
.css(c)
.addClass("lower");
$(this.flippingObject)
.width(this.settings.charWidth)
.height(this.settings.charHeight >> 1)
.css($.extend(c, {
'position': 'absolute',
'left': 0,
'top': 0
}))
.hide()
.addClass("flipping");
$(this.domObject).append(this.upperObject);
$(this.domObject).append(this.lowerObject);
$(this.domObject).append(this.flippingObject);
}
var lp = Letter.prototype;
/**
* Return DOM Object
*
* @returns {HTMLElement|*}
*/
lp.getDOMObject = function () {
return this.domObject;
}
lp.getCharOffset = function (someChar) {
return Math.max(0, this.settings.charsMap.indexOf(someChar));
}
/**
* Set Letter character
* @param char
* @param charFrom
* @param ratio
*/
lp.setChar = function (someChar, charFrom, ratio) {
if ( typeof ratio == 'undefined' ) {
ratio = 1;
}
var offset = this.getCharOffset(someChar);
$(this.upperObject).css({
'background-position': '-' + (offset * this.settings.charWidth) + 'px 0px'
});
if ( ratio >= 1 ) {
$(this.lowerObject).css({
'background-position': '-' + (offset * this.settings.charWidth) + 'px -' + (this.settings.charHeight >> 1) + 'px'
});
$(this.flippingObject).hide();
}
else if ( ratio <= 0 ) {
var offsetFrom = this.getCharOffset(charFrom);
$(this.upperObject).css({
'background-position': '-' + (offsetFrom * this.settings.charWidth) + 'px 0px'
});
$(this.lowerObject).css({
'background-position': '-' + (offsetFrom * this.settings.charWidth) + 'px -' + (this.settings.charHeight >> 1) + 'px'
});
$(this.flippingObject).hide();
}
else {
var offsetFrom = this.getCharOffset(charFrom);
$(this.lowerObject).css({
'background-position': '-' + (offsetFrom * this.settings.charWidth) + 'px -' + (this.settings.charHeight >> 1) + 'px'
});
var d;
if ( ratio < 0.5 ) {
d = (90 * 2 * ratio);
$(this.flippingObject)
.css({
'top': 0,
'z-index': Math.round(d),
'-webkit-transform': 'rotateX(-' + d + 'deg)',
'-moz-transform': 'rotateX(-' + d + 'deg)',
'-ms-transform': 'rotateX(-' + d + 'deg)',
'transform': 'rotateX(-' + d + 'deg)',
'-webkit-transform-origin': 'bottom center 0',
'-moz-transform-origin': 'bottom center 0',
'-ms-transform-origin': 'bottom center 0',
'transform-origin': 'bottom center 0',
'background-position': '-' + (offsetFrom * this.settings.charWidth) + 'px 0px'
});
}
else {
d = (90 * 2 * (1 - ratio));
$(this.flippingObject)
.css({
'top': (this.settings.charHeight >> 1) + 'px',
'z-index': Math.round(d),
'-webkit-transform': 'rotateX(' + d + 'deg)',
'-moz-transform': 'rotateX(' + d + 'deg)',
'-ms-transform': 'rotateX(' + d + 'deg)',
'transform': 'rotateX(' + d + 'deg)',
'-webkit-transform-origin': 'top center 0',
'-moz-transform-origin': 'top center 0',
'-ms-transform-origin': 'top center 0',
'transform-origin': 'top center 0',
'background-position': '-' + (offset * this.settings.charWidth) + 'px -' + (this.settings.charHeight >> 1) + 'px'
});
}
$(this.flippingObject).show();
}
}
/***************************************************************************
* SplitFlap
**************************************************************************/
function SplitFlap(settings) {
this.settings = settings;
this.domObject = document.createElement('div');
this.letters = new Array();
$(this.domObject).addClass("splitflap");
}
var sp = SplitFlap.prototype;
sp.getDOMObject = function () {
return this.domObject;
}
sp.build = function (size) {
$(this.domObject)
.css({
position: 'relative'
})
.width(size * this.settings.charWidth)
.height(this.settings.charHeight);
for ( var i = 0; i < size; i++ ) {
var letter = new Letter(this.settings);
var o = letter.getDOMObject();
$(o).css({
position: 'absolute',
left: i * this.settings.charWidth,
top: 0
});
$(this.domObject).append(o);
this.letters[ i ] = letter;
}
}
sp.setText = function (text, textFrom) {
var animated;
if ( typeof textFrom == 'undefined' ) {
textFrom = text;
animated = false;
}
else {
animated = true;
}
// Normalize text
while ( textFrom.length < this.letters.length ) {
if ( this.settings.padDir == 'left' ) {
textFrom = textFrom + this.settings.padChar;
}
else {
textFrom = this.settings.padChar + textFrom;
}
}
// Initialise display
var charsFrom = (new String(textFrom)).split("");
for ( var i = 0, l = this.letters.length; i < l; i++ ) {
var letter = this.letters[ i ];
letter.setChar(charsFrom[ i ]);
}
// Animation
if ( animated ) {
// Normalize text
while ( text.length < this.letters.length ) {
if ( this.settings.padDir == 'left' ) {
text = text + this.settings.padChar;
}
else {
text = this.settings.padChar + text;
}
}
var chars = (new String(text)).split("");
this.animation = {
letters: new Array()
};
for ( var i = 0, l = this.letters.length; i < l; i++ ) {
var al = {
ratio: 0,
speed: this.settings.speed + Math.random() * this.settings.speedVariation,
letters: new Array(charsFrom[ i ])
};
var index = this.letters[ i ].getCharOffset(charsFrom[ i ]);
while ( this.settings.charsMap.charAt(index) != chars[ i ] ) {
index = (index + 1) % this.settings.charsMap.length;
al.letters.push(this.settings.charsMap.charAt(index));
}
this.animation.letters[ i ] = al;
}
if ( this.settings.autoplay ) {
this.animate();
}
}
}
sp.animate = function () {
var t = new Date().getTime();
if ( typeof this.animation.time == 'undefined' ) {
this.animation.time = t;
}
var dt = 0.001 * (t - this.animation.time);
var n = 0;
for ( var i = 0, l = this.animation.letters.length; i < l; i++ ) {
var letter = this.letters[ i ];
var al = this.animation.letters[ i ];
if ( al.letters.length > 1 ) {
al.ratio += al.speed * dt;
if ( (al.ratio > 1) && (al.letters.length > 1) ) {
al.ratio = 0;
al.letters.shift();
}
}
if ( al.letters.length > 1 ) {
letter.setChar(al.letters[ 1 ], al.letters[ 0 ], al.ratio);
n++;
}
else {
letter.setChar(al.letters[ 0 ]);
}
}
this.animation.time = t;
if ( n > 0 ) {
requestAnimationFrame(bind(this.animate, this));
}
else {
this.settings.onComplete(this);
}
}
/***************************************************************************
* jQuery
**************************************************************************/
$.fn.splitFlap = function (options) {
if ( options == 'splitflap' ) {
if ( this.length < 0 ) {
return false;
}
var o = this.get(0);
if ( typeof o.splitflap == 'undefined' ) {
return false;
}
return o.splitflap;
}
var settings = $.extend({
image: '/img/char/numbers.png',
imageSize: '',
charsMap: '0123456789',
charWidth: 50,
charHeight: 100,
charSubstitute: ' ',
padDir: 'left',
padChar: ' ',
speed: 3,
speedVariation: 2,
text: '',
textInit: '',
autoplay: true,
onComplete: function () {}
}, options);
return this.each(function () {
var text = (new String(settings.text)).toUpperCase();
if ( text == '' ) {
text = (new String($(this).html())).toUpperCase();
}
// Verify chars
for ( var i = 0, l = text.length; i < l; i++ ) {
var c = text.charAt(i);
if ( settings.charsMap.indexOf(c) < 0 ) {
text = text.replace(c, settings.charSubstitute);
}
}
var textInit = settings.textInit.toUpperCase().substr(0, text.length);
// Verify chars
for ( var i = 0, l = textInit.length; i < l; i++ ) {
var c = textInit.charAt(i);
if ( settings.charsMap.indexOf(c) < 0 ) {
textInit = textInit.replace(c, settings.charSubstitute);
}
}
while ( textInit.length < text.length ) {
textInit = textInit + settings.charsMap.charAt(Math.floor(settings.charsMap.length * Math.random()));
}
this.splitflap = new SplitFlap(settings);
this.splitflap.build(text.length);
$(this).empty().append(this.splitflap.getDOMObject());
this.splitflap.setText(text, textInit);
});
};
})(jQuery);
所以这是我从DB计算的函数
my.js
(function( my ) {
"use strict";
// Namespace trick explained here: http://stackoverflow.com/a/5947280/587641
// For a public property or function, use "sin.xxx = ..."
// For a private property use "var xxx = "
// For a private function use "function xxx(..."
/**
*Assign a value to the counter, adding digits to the left when they are serving,
* And resetting the digits to the left when they are no longer needed, but without removing them.
*/
sin2.setCounter = function(value) {
var i = 0;
var stringValue = '' + value;
var valueDigitNum = stringValue.length; // Number of digits in value
var htmlDigitNum = $('.example .splitflap').length; // Number of digits in HTML
// I enter the digits missing for millions in HTML
for (i = htmlDigitNum; i < valueDigitNum; i++) {
$('.example').prepend($('.example .splitflap').first().clone());
htmlDigitNum++;
}
// I value the figures, putting zeros on the left
var htmlDigits = $('.example .splitflap');
for (i=0; i<htmlDigitNum; i++) {
var htmlIndex = i;
var valueIndex = valueDigitNum-htmlDigitNum+i;
var digit = '0';
if (valueIndex>=0) {
digit = stringValue[valueIndex];
}
htmlDigits.eq(htmlIndex).text(digit);
}
}
}( window.my = window.my || {} ));
我想要更改的旧计数器
<div class="Counter">
<div th:each="digit,status : ${@commonData.counterDigits}"
th:with="pos=${status.size-status.count}"
class="Box img-responsive"
th:classappend="${pos>5?'BoxMilions':pos>2?'BoxThousand':'BoxHundreds'}">
<span class="Count" th:text="${digit}">.</span>
</div>
</div>
新计数器分裂皮瓣
<script yada:src="@{/res/js/jquery.splitflap.js}" type="text/javascript"></script>
<script type="text/javascript" th:inline="javascript">
(function ($) {
$(document).ready(function () {
$('.do-splitflap')
.splitFlap();
});
})(jQuery);
</script><div class="example">
<div th:each="digit,status : ${@commonData.counterDigits}"
class="splitflap img-responsive">
<span class="do-splitflap" th:text="${digit}">.</span></div>
</div>
如果我在更新计数器编号时尝试使用新计数器，则css样式不起作用。
OLD CSS
.Box {
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
text-align: center;
float: left;
width: 4em;
margin: 2px auto;
border-style:solid;
border-color:#EFF6F0;
}
.BoxMilions{
background:url(images/counter/milions.jpg) no-repeat;
background-size: cover;
}
.BoxThousands {
background:url(images/counter/thou.jpg) no-repeat;
background-size: cover;
}
.BoxHundreds {
background:url(images/counter/hundr.jpg) no-repeat;
background-size: cover;
}
.Count {
font-family: sans-serif;
font-size: 97px;
background-color: transparent;
text-align: center;
width: 100%;
color: #fff;
line-height: 104%;
}
新CSS
.example {
padding: 0 0 10px;
margin-bottom: 20px;
}
.splitflap {
margin: 0 auto;
float: left;
padding-right: 5px;
-webkit-perspective-origin: top center;
-moz-perspective-origin: top center;
-ms-perspective-origin: top center;
perspective-origin: top center;
-webkit-perspective: 900px;
-moz-perspective: 900px;
-ms-perspective: 900px;
perspective: 900px;
}
第一次更新号码后的动画消失，只有号码不断更新。
正确使用拆分皮瓣的任何解决方案？