Odometer使用JavaScript和CSS制作数字滑动效果
Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以运行起来非常的流畅,需要这种效果的朋友不妨试试这个插件。
所有的主题都可以自定义文字的大小和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/
Odometer使用JavaScript和CSS制作数字滑动效果的更多相关文章
- 采用cocos2d-x lua 制作数字滚动效果样例
require "Cocos2d"require "Cocos2dConstants"local testscene = class("testsce ...
- 超实用的JavaScript代码段 Item5 --图片滑动效果实现
先上图 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <me ...
- PPT制作手机滑动效果
原文链接: https://www.toutiao.com/i6495341287196066317/ 我们添加一个手机图片 选择"插入"选项卡,插入两条直线,如下图所示.插入直线 ...
- 【转】CSS制作图形速查表-存档
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...
- CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]
转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...
- 【javascript/css】Javascript+Css实现图片滑动浏览效果
今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...
- 前端html、Javascript、CSS技术小结
简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页 ...
- 手机开发必备技巧:javascript及CSS功能代码分享
1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
随机推荐
- 浅谈C++中的那些内存泄露
尽管学过C语言.可是C++里面的一些基础还是不太懂,还须要再掌握. 老范也開始要讲C++设计模式了,必须快点看了.不然就要白花窝滴钱了. 对于内存泄露,我的个人理解就是程序在执行过程中,自己开辟了空间 ...
- C++沉思录之三——设计容器类
一.对容器的基本认识 总的来说,容器应该包含放在其中的对象的副本,而不是对象本身. 二.复制容器意味着什么? 通常将容器成为模板,而容器内的对象的类型就是模板参数.Container<T> ...
- javaCV:爱之初体验
最近实验室有了新任务,要求使用java进行模式识别,在具体点就是人脸识别.精确的边缘检测. 第一个问题便是环境配置,搭建工作台.(其实也不是什么难事,但是本人虽然从事较多的java开发,但很少接触模式 ...
- mevan引入容联云通讯jar
首先从官网下载jar 然后拷贝到lib目录下 最后在pom.xml中这样写 <dependency> <groupId>cn.com</groupId> <a ...
- SQL转换函数to_char/to_date/to_number
日期型->字符型转换函数to_char(d [,fmt]) 函数to_char(d [,fmt])用于将日期型数值转换为字符串(varchar2类型),其中参数d用于指定日期值,fmt用于指定要 ...
- position:fixed定位时 “高度坍塌” 问题的解决
问题:对于固定定位的元素,固定住高度,后面紧跟的模块会当做前面的固定元素不存在似的,这给布局带来了困扰 解决方法: 1.给第二个模块div设置margin-top的值,margin-top的值设为大于 ...
- python 下的数据结构与算法---4:线形数据结构,栈,队列,双端队列,列表
目录: 前言 1:栈 1.1:栈的实现 1.2:栈的应用: 1.2.1:检验数学表达式的括号匹配 1.2.2:将十进制数转化为任意进制 1.2.3:后置表达式的生成及其计算 2:队列 2.1:队列的实 ...
- 导出Exexcl类
前台: <%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation=" ...
- java 后台线层也叫守护线层
import java.util.concurrent.locks.*; class Do9 { public static void main(String[] args) { Ds d=new D ...
- 打破C++ Const 的规则
从一个C++菜鸟改函数开始 CString MyClass::GetStringValue() const { return m_strValue; } 这个值可能还没有赋值,好吧,那么我先判断是不是 ...