html5 数字滚动选择器,Odometer使用JavaScript和CSS制作数字滑动效果
Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以运行起来非常的流畅,需要这种效果的朋友不妨试试这个插件。
所有的主题都可以自定义文字的大小和Odometer元素的标签。
兼容性
Odometer能在IE8+, FF4+, Safari 6+, Chrome等高级浏览器上完美的运行。
功能
不仅仅可以让数字滑动,同样的文字也可以实现这样的效果。
指定文字的内容
还可以用于数学计算的输出结果,感觉很棒的动画效果。
显示主题
Odometer主题的各种文件样式表中被准备。
使用方法
首先我们需要引入我们的插件文件
其次编写我们HTML代码
最后使用JavaScript方法调用Odometer插件,通过调用Odometer对象,设置我们文本框的值setTimeout(function(){
odometer.innerHTML = 456;
}, 1000);
如果你使用的使用jQuery,那么你可以通过下面的方法$('.odometer').html(123)
特定的文字使用情况如下HTML中记述。
odometer-first-value初期表示,odometer-last-value最终表示。
L
M
O
小结
最简单的用法是:引入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
本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接。
转自(http://www.uedsc.com/odometer.html)
html5 数字滚动选择器,Odometer使用JavaScript和CSS制作数字滑动效果相关推荐
- 用JavaScript+html+css制作当当购物车
cartStyle.css body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;} ul,li,ol{list-style: none;} .content{ ...
- html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档 以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
- 数字滚动原生js的三种方式
数字滚动原生js的三种方式 让数字滚动的效果简单用计时器setInterval就能轻易的实现,例如 <!DOCTYPE html> <html><head>< ...
- js数字滚动功能实现
项目中用到数字滚动特效,就写了个demo记录一下 效果: 代码实现: <!DOCTYPE html> <html lang="en"><head> ...
- jQuery图标数字滚动计数代码
jQuery图标数字滚动计数代码 jQuery基于css3属性制作图标和数字结合布局,默认数字滚动计数效果代码. 演示地址 下载地址
- html5 怎么实现展开文字,html5实现滚动文字
滚动文字可以用javascript实现,今天我们用html5的滚动文字标签:marquee实现.只要在标签之间写要进行滚动的文字即可,而且可以设置这些文字的样式.默认从浏览器的右方缓缓向左滚动(循环) ...
- 初级开发者福音:手把手教你实现数字滚动效果~
文章目录 一.前言 二.背景知识 三.实现方案 Step 1:分析需求 Step 2:实现单个数字的滚动效果 Step 3:组件接口设计 Step 4:完善组件 一.前言 前端数字滚动显示的场景很多, ...
- html数字滚动动画效果,高效的jquery数字滚动特效
本文实例讲述了基于jquery数字滚动特效的代码,分为四种情况分享给大家供大家参考,具体如下: 有分隔符,有小数点: 只有分隔符: 只有小数点: 无分隔符,无小数点: 运行效果图: 具体代码如下 数字 ...
- Javascript中字符串转数字
我们知道最简洁的数字转字符串方法是: var num = 123; var string = num + ""; 也就是在数字后面加上一个空字符.那么最简洁字符串转数字方法呢? 字 ...
最新文章
- 【BIEE】报表导出数据只显示500行,如何解决?
- linux常见的几种运行级,linux有几种运行级别
- c/c++比较灵活的方法:回调函数和函数指针
- vivado链接不上开发板最有可能原因
- ASP.NET Core Web Api之JWT刷新Token(三)
- nssl1231-Gift【01背包,dp】
- linux添加phoenix引导,在linux怎么执行phoenix 脚本
- 反编译 破解crash html editor winform [WinHTMLEditorControl.dll][.NET Win HTML Editor Control]
- jquery显示与隐藏效果
- STM8S单片机入门1(开发环境搭建)
- Python:井字棋游戏
- HDLBits学习笔记——移位寄存器
- 梁宁增长思维30讲笔记 - 模式
- upload-labs-master 通关分析
- 学习_Linux_Command_atq
- 元数据管理 开源项目技术选型
- 【转】那些年搞不懂的高深术语——依赖倒置•控制反转•依赖注入•面向接口编程
- 《诗的格律》学习简要
- 线上会议竞品调研报告
- java 使用adobe fms流媒体
热门文章
- appium java 测试用例_如何在C#中使用Appium编写测试用例?
- php swoole环境搭建,windows系统php环境安装swoole具体步骤
- react 哲学_细聊Concent amp; Recoil , 探索react数据流的新开发模式
- 谷歌大一统?Fuchsia OS已可提供完整的Chrome浏览器体验
- 数据可视化,必须注意的30个小技巧!
- 机器学习中如何处理不平衡数据?
- android判断银行卡号格式不正确的是什么意思,android银行卡号验证算法详解
- as my sql 后面加表达式_Lambda 表达式有何用处?如何使用?
- xshell执行结果到文本_xshell拷贝文件到本地
- mysql %和正则_mysql 正则模式和like模糊查询