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。