Odometer是一個使用JavaScript和CSS技術，制作出數字上下滑動的動畫效果插件，有點類似與我們的天然氣的讀數的動畫效果，這個插件是輕量級的，壓縮版本只有3kg，使用CSS3動畫技術，所以運行起來非常的流暢，需要這種效果的朋友不妨試試這個插件。
所有的主題都可以自定義文字的大小和Odometer元素的標簽。
兼容性
Odometer能在IE8+, FF4+, Safari 6+, Chrome等高級瀏覽器上完美的運行。
功能
不僅僅可以讓數字滑動，同樣的文字也可以實現這樣的效果。
指定文字的內容
還可以用於數學計算的輸出結果，感覺很棒的動畫效果。
顯示主題
Odometer主題的各種文件樣式表中被准備。
使用方法
首先我們需要引入我們的插件文件
<link rel="stylesheet" href="odometer-theme-car.css" /> <script src="odometer.js"></script>
其次編寫我們HTML代碼
<div id="odometer" class="odometer">123</div>
最后使用JavaScript方法調用Odometer插件，通過調用Odometer對象，設置我們文本框的值
setTimeout(function(){
odometer.innerHTML = 456;
}, 1000);
如果你使用的使用jQuery，那么你可以通過下面的方法
$('.odometer').html(123)
特定的文字使用情況如下HTML中記述。
odometer-first-value初期表示，odometer-last-value最終表示。
<span class="odometer-value odometer-first-value"> </span> <span class="odometer-value">L</span> <span class="odometer-value">M</span> <span class="odometer-value odometer-last-value">O</span>
小結
最簡單的用法是：引入JavaScript文件和一個主題CSS在你的頁面文件。添加odometer類的任何數字你想制作動畫的變化。
你可以使用innerHTML，innerText，或使用jQuery的 .text() or .html()的方法來改變這個HTML標簽的內容，其中切換內容的動畫會自動發生。你使用的任何庫更新自己的價值，只要他們不更新被擦除和重新描繪的odometer，會工作得很好。
在舊的瀏覽器，它會自動返回一個簡單的動畫，不稅他們脆弱的JavaScript運行時。
高級
你可以通過創建一個自定義設置選項odometeroptions對象，來自定義配置odometer插件。
window.odometerOptions = {
auto: false, // Don't automatically initialize everything with class 'odometer'
selector: '.my-numbers', // Change the selector used to automatically find things to be animated
format: '(,ddd).dd', // Change how digit groups are formatted, and how many digits are shown after the decimal point
duration: 3000, // Change how long the javascript expects the CSS animation to take
theme: 'car', // Specify the theme (if you have more than one theme css file on the page)
animation: 'count' // Count is a simpler animation method which just increments the value,
// use it when you're looking for something more subtle.
};
你可以手動初始化與全局的odometer配置
var el = document.querySelector('.some-element');
od = new Odometer({
el: el,
value: 333555,
// Any option (other than auto and selector) can be passed in here
format: '',
theme: 'digital'
});
od.update(555)
// or
el.innerHTML = 555
格式
格式選項允許您配置如何格式化數字組， 多少位小數點后顯示的是。
Format - Example (,ddd) - 12,345,678 (,ddd).dd - 12,345,678.09 (.ddd),dd - 12.345.678,09 ( ddd),dd - 12 345 678,09 d - 12345678
Github地址：http://github.hubspot.com/odometer/