jQuery超酷文字随机翻转变换动画特效

Flapper是一款效果非常酷的文字随机翻转变换动画jQuery特效。它的效果类似于机场或车站显示航班或车次的文字变换效果，每个文字都随机变换几次，然后才显示某个设定好的文字。

该文字特效可以显示文字、字母或数字。它有6种尺寸设置，2种预定义主题和2种动画过渡效果。

为了达到最好的效果，该文字插件需要两个外部jQuery插件的支持：numberformatter和transform。如果不使用这两个外部依赖也可以，只是效果会稍微差一些。

Flapper提供了6种尺寸设置和2种预定义主题，你可以选择一种来使用。

使用方法

HTML结构

HTML结构使用一个<input>元素即可。

<input id="display" />                
              

调用插件

<script language="JavaScript">
    $('#display').flapper(options).val(12345).change();
<script>                
              

每一次文字的变化调用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属性。

主题设置

Flapper提供了6种尺寸：XS、X、M、L、XL和XXL，默认的尺寸是M。

两种颜色主题分别是light和dark，默认的是dark。