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超酷文字随机翻转变换动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。