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最终表示。?
如果您觉得本文的内容对您的学习有所帮助:
关键字:
jquery