Odometer使用JavaScript和CSS制作数字滑动效果

发表于 JS 分类，标签:
11 08月 2015
0

Odometer是一个使用JavaScript和CSS技术，制作出数字上下滑动的动画效果插件，有点类似与我们的天然气的读数的动画效果，这个插件是轻量级的，压缩版本只有3kg，使用CSS3动画技术，所以运行起来非常的流畅，需要这种效果的朋友不妨试试这个插件。

Odometer使用JavaScript和CSS制作数字滑动效果

所有的主题都可以自定义文字的大小和Odometer元素的标签。

兼容性

Odometer能在IE8+, FF4+, Safari 6+, Chrome等高级浏览器上完美的运行。

功能

不仅仅可以让数字滑动，同样的文字也可以实现这样的效果。

2013102502-01

指定文字的内容

还可以用于数学计算的输出结果，感觉很棒的动画效果。

2013102502-02

显示主题

Odometer主题的各种文件样式表中被准备。

2013102502-03

2013102502-04

2013102502-05

2013102502-06

使用方法

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

<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">&nbsp;</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/


本文系作者 问说网 授权问说网发表，并经问说网编辑，转载请注明出处和 本文链接。

转自（http://www.uedsc.com/odometer.html）


0 篇评论

发表我的评论