Flapper是一款效果非?？岬奈淖蛛S機(jī)翻轉(zhuǎn)變換動(dòng)畫jQuery特效。它的效果類似于機(jī)場(chǎng)或車站顯示航班或車次的文字變換效果，每個(gè)文字都隨機(jī)變換幾次，然后才顯示某個(gè)設(shè)定好的文字。

該文字特效可以顯示文字、字母或數(shù)字。它有6種尺寸設(shè)置，2種預(yù)定義主題和2種動(dòng)畫過渡效果。

為了達(dá)到最好的效果，該文字插件需要兩個(gè)外部jQuery插件的支持：numberformatter和transform。如果不使用這兩個(gè)外部依賴也可以，只是效果會(huì)稍微差一些。

Flapper提供了6種尺寸設(shè)置和2種預(yù)定義主題，你可以選擇一種來使用。

使用方法

HTML結(jié)構(gòu)

HTML結(jié)構(gòu)使用一個(gè)元素即可。

調(diào)用插件

$('#display').flapper(options).val(12345).change();

每一次文字的變化調(diào)用change()方法來更新文字。

配置參數(shù)

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

}

通常你只需要關(guān)心width和chars_preset屬性。如果你想要使用自定義的字符，可以在chars_preset中指定不同的chars。Flapper 會(huì)使用你的字符集合中的第一個(gè)字符來作為默認(rèn)的圖形，所以你最好設(shè)置它為?或0。

預(yù)置的字符如下：

num：?，1-9，0，美元符號(hào)，逗號(hào)，冒號(hào)

hexnum：?，1-9,A-F，0

alpha：?，A-Z

alphanum：所有的alpha和num

時(shí)間參數(shù)timing，min_timing和threshhold用于控制字符的變換速度。如果需要比較明顯的字符變換效果，可以設(shè)置timing為一個(gè)較大的值。min_timing用于控制字符的閃動(dòng)速度，越大越慢。通常不需要設(shè)置threshhold屬性。

參數(shù)

默認(rèn)值

描述

width

6

字符的寬度。

format

null

傳遞給numberformatter插件的一個(gè)對(duì)象。該參數(shù)不是必須的。

align

right

可選right或left。Flapper的對(duì)齊方式。

padding

元素之間的padding值，如果使用numberformatter插件可將它設(shè)置為0。

主題設(shè)置

Flapper提供了6種尺寸：XS、X、M、L、XL和XXL，默認(rèn)的尺寸是M。

兩種顏色主題分別是light和dark，默認(rèn)的是dark。

總結(jié)

以上是生活随笔為你收集整理的html文字自动上翻,jQuery超酷文字随机翻转变换动画特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。