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

问说网 · 发布于 2015-05-31 · 字数5372 · 浏览 4018 · 评论 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类的任何数字你想制作动画的变化。

你可以使用innerHTMLinnerText,或使用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/

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

相关文章

  • 2016-09-24紫色背景扁平化iPhone5手机样机素材
  • 2016-10-21多彩好看的淘宝销售标签箭头EPS素材
  • 2016-12-26恒创主机2017跨年盛典 主机/云服务器/独立服务器买就送
  • 2017-02-17问说网站长分享提升WordPress访问速度优化
  • 2017-04-01Wordpress固定链接伪静态的设置方法
  • 2017-04-04java中的Runable和Thread
  • 2017-04-05解决mysql无法远程访问的问题
  • 2017-04-19ASP.NET MVC 4 中的JSON数据交互的方法
  • 发布评论

    为您推荐

    紫色背景扁平化iPhone5手机样机素材
    问说网 · 发布于 2016-09-24

    紫色背景扁平化iPhone5手机样机素材

    紫色背景扁平化iPhone5手机样机素材,扁平化样机素材免费下载分享,iPhone5手机样机PSD素材设计,扁平化手机素材投影,倾斜的手机样机素材。

    多彩好看的淘宝销售标签箭头EPS素材
    问说网 · 发布于 2016-10-21

    多彩好看的淘宝销售标签箭头EPS素材

    问说网 · 发布于 2017-02-17

    问说网站长分享提升WordPress访问速度优化

    问说网创建也有5年了,最开始并不是使用的WordPress,是使用国内的DedeCMS开源程序,中间被黑客入侵了就换成了WordPress一直用到现在,随着文章…

    问说网 · 发布于 2017-04-01

    WordPress固定链接伪静态的设置方法

    今天,想着在我机器上测试一下wordpress,虽然之前也有这个开源的程序,可是一直没有安装呢,再加上最近一直忙于其他的工作,也忽略了不少,突然想建立一个属于自…

    问说网 · 发布于 2017-04-04

    java中的Runable和Thread

    在java中可有两种方式实现多线程,一种是继承Thread类,一种是实现Runnable接口;Thread类是在java.lang包中定义的。一个类只要继承了T…

    问说网 · 发布于 2017-04-05

    解决mysql无法远程访问的问题

    问题描述 1.windows 2003 server 32bit+IIS+护卫神+安全狗+navicat 2.root@%已配置 3.干掉护卫神,安全狗,防火墙…

    问说网 · 发布于 2017-04-19

    ASP.NET MVC 4 中的JSON数据交互的方法

    前台Ajax请求很多时候需要从后台获取JSON格式数据,一般有以下方式: 拼接字符串 1 return Content("{\"id\":\"1\",\"nam…

    用易拉罐制作路由器Wi-Fi放大器有用吗?
    问说网 · 发布于 2018-04-19

    用易拉罐制作路由器Wi-Fi放大器有用吗?

    网上有传易拉罐可以增强路由信号的技巧,真的有用吗? 360路由官方进行了测试,得出结论:自制的信号扩展器易拉罐平面角度可能影响其接收,即角度制约了信号传输方向。…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13169 文章
    496 评论
    2082 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 3207

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2962

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 3083

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2491

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2703

    更多 推荐作者

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    关注 凉城梦镜

    文章 79 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!