forked from jes-carr/jOdometer
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
92 lines (83 loc) · 3.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jOdometer jQuery plugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.jodometer.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.counter1').jOdometer({increment: 1, counterStart:'000', numbersImage: 'images/jodometer-numbers.png', spaceNumbers: 1, offsetRight:-1});
$('.counter2').jOdometer({increment: 3.17, counterStart:'0087.15', counterEnd:'0159.50', numbersImage: 'images/jodometer-numbers.png', spaceNumbers: 2});
$('.counter3').jOdometer({counterStart:'123', counterEnd:'123', numbersImage: 'images/jodometer-numbers.png'});
$('.counter4').jOdometer({increment: 1, counterStart:'1234567',numbersImage: 'images/jodometer-numbers-with-comma.png',formatNumber: true,spaceNumbers: 2,widthDot: 8});
});
</script>
<style type="text/css" media="screen">
.counter1{
width:44px;
height:31px;
border:1px solid #000;
overflow:hidden;
position:relative;
background-color:#f00;
}
.counter2{
width:108px;
height:31px;
border:1px solid #000;
overflow:hidden;
position:relative;
background-color:#0f0;
}
.counter3{
width:41px;
height:31px;
border:1px solid #000;
overflow:hidden;
position:relative;
background-color:#0f0;
}
.counter4{
width:135px;
height:31px;
border:5px solid #ccc;
overflow:hidden;
position:relative;
background-color:#ccc;
}
</style>
</head>
<body>
<h1>jOdometer:</h1>
<pre>
jOdometer is a counter that works like an odometer: moving the numbers up like a wheel
Usually we will need a "position: relative" and an "overflow: hidden" in the container element.
Sample Configuration:
$('.counter').jOdometer({increment: 3.17, counterStart:'0087.15', counterEnd:'0159.50', numbersImage: '/images/numbers.png', spaceNumbers: 2, offsetRight:5});
Config Options:
counterStart: Number we are starting with. To get a specific number of digits/decimals it have to be a string (e.g. '0005.50') // Default: '0000.00'
counterEnd: The counter stop when reach this number. If it is the same as counterStart the odometer is static. False to don't stop never. // Default: false
delayTime: Delay between each number change // Default: 1000
increment: Number increment after each delayTime // Default: 0.01
speed: Speed for the change number animation // Default: 500
easing: Easing for the change number animation. Other than 'swing' or 'linear' must be provided by plugin // Default: 'swing'
numbersImage: Image used for the numbers. You can use .psd provided // Default: '/images/numbers.png'
heightNumber: The height that each number needs // Default: 31
widthNumber: Width of the numbers' image // Default: 14
offsetRight: Distance to the right // Default: 0
spaceNumbers: Separation between the numbers' columns // Default: 0
widthDot: Decimal dot's special width // Default: 10
formatNumber: Whether to format the number with commas every 3 digits // Default: false
We can override the defaults with:
$.fn.jOdometer.defaults.spaceNumbers = 1;
</pre>
<h1>jOdometer samples:</h1>
<pre>
</pre>
<div class="counter1"></div>
<div class="counter2"></div>
<div class="counter3"></div>
<div class="counter4"></div>
</body>
</html>