淘先锋技术网

首页 1 2 3 4 5 6 7

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

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

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

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

57c583b7b6af27f7303ca421a03863cc.png

使用方法

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。