Odometer使用JavaScript和CSS制作数字滑动效果
2015-07-28 14:18
645 查看
Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以运行起来非常的流畅,需要这种效果的朋友不妨试试这个插件。
所有的主题都可以自定义文字的大小和Odometer元素的标签。
指定文字的内容
还可以用于数学计算的输出结果,感觉很棒的动画效果。
其次编写我们HTML代码
最后使用JavaScript方法调用Odometer插件,通过调用Odometer对象,设置我们文本框的值
如果你使用的使用jQuery,那么你可以通过下面的方法
特定的文字使用情况如下HTML中记述。
odometer-first-value初期表示,odometer-last-value最终表示。
你可以使用
在旧的浏览器,它会自动返回一个简单的动画,不税他们脆弱的JavaScript运行时。
你可以手动初始化与全局的
Github地址:http://github.hubspot.com/odometer/
所有的主题都可以自定义文字的大小和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/
相关文章推荐
- javascript数组循环遍历之foreach
- JVM常用分析工具JPS/JINFO/JSTACK/JSTAT/JMAP详解
- json小记
- js获取随机数
- javascript Date format(js日期格式化)
- js的时间操作方法
- javascript中动态加载js文件多种解决办法
- 为网页添加蒙板效果和弹出层js
- JSPatch 实现原理详解
- javascript+html5实现绘制圆环的方法
- ubuntu下源码安装phantomjs时setuptools错误解决方法
- 使用Javascript类库Qrcode处理和生成二维码
- js实现锚点
- js判断访问终端
- 后台注册js代码的方法
- 深入了解JavaScript中的Symbol的使用方法
- 将ViewBag的值传递给js
- JavaScript中的constructor、instanceof、isPrototypeOf、typeof以及hasOwnProperty
- 深入理解JavaScript中的箭头函数
- js正则验证手机号,电话邮箱