Flapper是一款效果非常酷的文字随机翻转变换动画jQuery特效。它的效果类似于机场或车站显示航班或车次的文字变换效果,每个文字都随机变换几次,然后才显示某个设定好的文字。
该文字特效可以显示文字、字母或数字。它有6种尺寸设置,2种预定义主题和2种动画过渡效果。
为了达到最好的效果,该文字插件需要两个外部jQuery插件的支持:numberformatter和transform。如果不使用这两个外部依赖也可以,只是效果会稍微差一些。
Flapper提供了6种尺寸设置和2种预定义主题,你可以选择一种来使用。
使用方法
HTML结构
HTML结构使用一个元素即可。
调用插件
每一次文字的变化调用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
。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!