热门关键字:
jquery > jquery教程 > jquery教程 > 数字滚动动画效果css3

数字滚动动画效果css3

290
作者:管理员
发布时间:2021/7/6 17:04:41
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4989
  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
友荐云推荐