Odometer是一個使用JavaScript和CSS技術，制作出數字上下滑動的動畫效果插件，有點類似與我們的天然氣的讀數的動畫效果，這個插件是輕量級的，壓縮版本只有3kg，使用CSS3動畫技術，所以運行起來非常的流暢，需要這種效果的朋友不妨試試這個插件。

所有的主題都可以自定義文字的大小和Odometer元素的標簽。

兼容性

Odometer能在IE8+, FF4+, Safari 6+, Chrome等高級瀏覽器上完美的運行。

功能

不僅僅可以讓數字滑動，同樣的文字也可以實現這樣的效果。

指定文字的內容

還可以用于數學計算的輸出結果，感覺很棒的動畫效果。

顯示主題

Odometer主題的各種文件樣式表中被準備。

使用方法

首先我們需要引入我們的插件文件

其次編寫我們HTML代碼

123

最后使用JavaScript方法調用Odometer插件，通過調用Odometer對象，設置我們文本框的值setTimeout(function(){

odometer.innerHTML?=?456;

},?1000);

如果你使用的使用jQuery，那么你可以通過下面的方法$('.odometer').html(123)

特定的文字使用情況如下HTML中記述。

odometer-first-value初期表示，odometer-last-value最終表示。?

L

M

O

小結

最簡單的用法是：引入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

本文系作者 問說網 授權問說網發表，并經問說網編輯，轉載請注明出處和 本文鏈接。

轉自(http://www.uedsc.com/odometer.html)

總結

以上是生活随笔為你收集整理的html5 数字滚动选择器,Odometer使用JavaScript和CSS制作数字滑动效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。