0
好，所以我需要一個里程錶風格jQuery計數器，發現[這整潔的] http://nleach.com/post/16045448547/odometer-style-counter-using-jquery。如何讓jQuery Counter工作？
我檢查了小提琴，但不能得到所有的元素工作。以下是我到目前爲止的地方。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
.counter {
display:block;
float:left;
font-size:2em;
line-height:1.2em;
-webkit-box-reflect: below -15px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, transparent), to(rgba(255,255,255,0.3)));
}
.counter span.digit {
background:#161616;
background: #3F3F3F; /* Old browsers */
background: linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -o-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -moz-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -webkit-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -ms-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0A0A0A), color-stop(0.5, #2B2B2B), color-stop(1, #3F3F3F));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F')"; /* IE8 */
zoom:1; -webkit-border-radius:0.1em;
-moz-border-radius:0.1em;
border-radius:0.1em;
background-clip:border;
color:#FFF;
display:block;
float:left;
height:44px;
margin:0 1px;
overflow:hidden;
padding:0;
position:relative;
text-align:center;
width:30px;
}
.counter span.digit span {
line-height:44px;
position:relative;
top:0;
}
.counter span.digit hr {
border-color: transparent;
-webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
height: 3px;
margin: -2px 0 0 0;
position: absolute;
top: 50%;
width: 100%;
z-index: 1;
}
.counter span.separator {
display:block;
float:left;
font-family:Georgia, serif;
font-size:0.5em;
position:relative;
top:0.5em;
}
.counter span.separator hr {
display:none;
}
</style>
</head>
<body onLoad:"initCounter()">
<script language="Javscript">
;(function($){
/*
Function: initCounter
Initializes the scrolling counter using the value currently displayed in the element.
Parameters:
$this - the counter container
e - jQuery Event object
See Also:
<animateDigit>
*/
function initCounter($this, e){
$this.find('.digit').each(function(){
var $display = $(this);
var $digit = $display.find('span');
$digit.html([0,1,2,3,4,5,6,7,8,9,0].reverse().join('<br/>'))
$digit.css({
top: '-' + (parseInt($display.height()) * (10 - parseInt($digit.attr('title')))) + 'px'
});
});
animateDigit($this.find('.digit:last'), e);
}
/*
Function: animateDigit
Moves the digit indicated by $this one step. If the end of the counter has been reach, the subsequent digit(s) will also be rotated
Parameters:
$this - digit to be rotated
e - jQuery Event object
*/
function animateDigit($this, e){
var $counter = $this.closest('.counter');
var $display = $this;
var $digit = $display.find('span');
// If we've reached the end of the counter, tick the previous digit
if(parseInt($digit.css('top')) == -1 * parseInt($display.height())){
animateDigit($display.prevAll('.digit:first'), e);
}
$digit.animate({
top: '+=' + $display.height() + 'px'
}, 500, function(){
// Repeat the animation on a semi-random interval
if($display.index('.counter .digit') == $counter.find('.digit').length - 1){
setTimeout(function(){
animateDigit($display, e);
}, Math.max(550, Math.random() * 10000));
}
// If we've reached the end of the counter, loop back to the top
if(parseInt($digit.css('top')) > -1 * parseInt($display.height())){
$digit.css({
top: '-' + (parseInt($display.height()) * 10) + 'px'
});
}
});
}
$(function(){
initCounter($('.counter'), $.Event('load'));
});
})(jQuery);
</script>
<span class="counter">
<span class="digit">
<span title="3">3</span>
<hr />
</span>
<span class="separator">
<span title=",">,</span>
<hr />
</span>
<span class="digit">
<span title="2">2</span>
<hr />
</span>
<span class="digit">
<span title="4">4</span>
<hr />
</span>
<span class="digit">
<span title="4">4</span>
<hr />
</span>
<span class="separator">
<span title=",">,</span>
<hr />
</span>
<span class="digit">
<span title="4">4</span>
<hr />
</span>
<span class="digit">
<span title="1">1</span>
<hr />
</span>
<span class="digit">
<span title="8">8</span>
<hr />
</span>
</span>
</body>
</html>
我在這裏做錯了什麼？謝謝
似乎工作就像我使用jsfiddle時提供的鏈接：http://jsfiddle.net/VSSet/ – 2013-03-02 19:46:34