html文字自动上翻,jQuery超酷文字随机翻转变换动画特效
Flapper是一款效果非常酷的文字随机翻转变换动画jQuery特效。它的效果类似于机场或车站显示航班或车次的文字变换效果,每个文字都随机变换几次,然后才显示某个设定好的文字。
该文字特效可以显示文字、字母或数字。它有6种尺寸设置,2种预定义主题和2种动画过渡效果。
为了达到最好的效果,该文字插件需要两个外部jQuery插件的支持:numberformatter和transform。如果不使用这两个外部依赖也可以,只是效果会稍微差一些。
Flapper提供了6种尺寸设置和2种预定义主题,你可以选择一种来使用。
使用方法
HTML结构
HTML结构使用一个元素即可。
调用插件
$('#display').flapper(options).val(12345).change();
每一次文字的变化调用change()方法来更新文字。
配置参数
var options = {
width: 6, // number of digits
format: null, // options for jquery.numberformatter, if loaded
align: 'right', // aligns values to the left or right of display
padding: ' ', // value to use for padding
chars: null, // array of characters that Flapper can display
chars_preset: 'num', // 'num', 'hexnum', 'alpha' or 'alphanum'
timing: 250, // the maximum timing for digit animation
min_timing: 10, // the minimum timing for digit animation
threshhold: 100, // the point at which Flapper will switch from
// simple to detailed animations
transform: true // Flapper automatically detects the jquery.transform
// plugin. Set this to false if you want to force
// transform to off
on_anim_start: null // Callback for start of animation
on_anim_end: null // Callback for end of animation
}
通常你只需要关心width和chars_preset属性。如果你想要使用自定义的字符,可以在chars_preset中指定不同的chars。Flapper 会使用你的字符集合中的第一个字符来作为默认的图形,所以你最好设置它为 或0。
预置的字符如下:
num: ,1-9,0,美元符号,逗号,冒号
hexnum: ,1-9,A-F,0
alpha: ,A-Z
alphanum:所有的alpha和num
时间参数timing,min_timing和threshhold用于控制字符的变换速度。如果需要比较明显的字符变换效果,可以设置timing为一个较大的值。min_timing用于控制字符的闪动速度,越大越慢。通常不需要设置threshhold属性。
参数
默认值
描述
width
6
字符的宽度。
format
null
传递给numberformatter插件的一个对象。该参数不是必须的。
align
right
可选right或left。Flapper的对齐方式。
padding
元素之间的padding值,如果使用numberformatter插件可将它设置为0。
主题设置
Flapper提供了6种尺寸:XS、X、M、L、XL和XXL,默认的尺寸是M。
两种颜色主题分别是light和dark,默认的是dark。
html文字自动上翻,jQuery超酷文字随机翻转变换动画特效相关推荐
- php插入html动态背景,HTML5超酷响应式视频背景动画特效
简要教程 这是一款HTML5超酷响应式视频背景动画特效.该视频背景可以将视频自适应屏幕的大小,制作出炫酷的动态视频背景效果. 使用方法 在页面中引入bideo.js文件. HTML结构 该视频背景动画 ...
- 好看的照片效果html,9款超绚丽的HTML5 3D图片动画特效
1.SVG玫瑰花盛开动画 SVG还是很强大的,我们之前也分享过很多利用SVG绘制出来的各种动画特效.比如超炫酷的SVG轮船行驶动画和HTML5 SVG圆形钢琴动画都是用SVG实现的超酷动画.今天我们要 ...
- jQuery和SVG炫酷弹射纸飞机动画特效
http://demo.htmleaf.com/1506/201506261811/index.html jQuery和css3自动轮换的用户评论留言 炫酷纯CSS3纸飞机动画特效
- 汉堡式折叠html,3种超酷汉堡包菜单按钮变形动画特效
这是一款使用CSS3和少量jQuery代码来完成的汉堡包菜单按钮变形动画特效.该特效使用CSS3 transition 和 transform 来完成变形动画效果,使用jQuery来触发按钮点击事件. ...
- jQuery canvas碎片粒子组成爱心图形动画特效
style.css代码: /* latin-ext */ @font-face {font-family: 'Lato';font-style: normal;font-weight: 900;src ...
- android 斑马线进度条,jQuery简单斑马线样式loading进度条动画特效
这是一款非常简单实用的jQuery斑马线样式loading进度条动画特效.该进度条特效通过简单的jQuery代码就完成了可控制的进度条动画特效.斑马线效果使用CSS3来完成,对不支持CSS3的浏览器可 ...
- 分享一个HTML5画布实现的超酷文字弹跳球效果
日期:2012/03/05 在线演示 本地下载 今天我们分享一个来自于html5canvastutorials的超酷弹跳球效果,这里我们使用纯HTML5的画布来实现动画及其图形.整个效果使用小球来组 ...
- h5自动弹窗html模板,html5手机弹出对话框动画特效
js代码 //成功 $("#success").click(function(){ new TipBox({type:'success',str:'操作成功',hasBtn:tru ...
- html文字变成汉堡插件,一组超酷汉堡包图标变形动画特效
Hamburgers是一款效果超酷的汉堡包图标变形动画特效CSS3动画库.这组汉堡包图标动画包括18种不同的汉堡包变形动画效果,你还可以通过Sass文件来自定义你自己的汉堡包图标变形动画. 安装 你可 ...
最新文章
- Java 查看文件绝对路径,JAVA获取文件绝对路径的方法
- mysql 左连接 例子_mysql左连接自连接例子
- canvas绘制三角形
- themleft模板库_Thymeleaf模板引擎常用总结
- Python+Opencv颜色和形状检测
- /home文件夹重新划分独立分区
- 无法获取签名信息,请上传有效包(110506)
- redis创建像mysql表结构_Redis数据结构列表实现
- 记录一个SpringBoot集成邮件及工具类博客
- opencv-api pyrDown
- 计算机系统-内存的最小存储单元
- 使用BetterZip结合自动操作工具和预设设置创建电影解压程序
- 设置全屏代码android,Android实现全屏显示的方法
- 两端“弱智”的HTML代码
- Python处理Excel数据分组
- 《关键对话:如何高效能沟通》读书笔记
- 3225 十进制到六进制
- ls-dyna基础教程
- c++由动态库dll文件生成lib文件的方法
- 自动驾驶汽车硬件与软件技术介绍
热门文章
- 最美四门轿跑车斯柯达Coupe面世,CC也害怕。
- SAP MIR7输入数量自动金额的设置
- 重新学习一下ABAP里面的逻辑数据库
- CONVERT_DATE_WITH_THRESHOLD
- 无性别服饰是趋势,但不该只停留在“中性”
- futurejava前台_web前端页面与后端Java的数据交互
- python数据爬虫课程_数据分析之Python3爬虫视频课程
- php中文网地址多少,计算机网络中有几种地址格式
- Python列表解析式,还支持异步?你知道吗?
- 弃繁就简!一行代码搞定 Python 日志!