html文字自动上翻,jQuery超酷文字随机翻转变换动画特效
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超酷文字随机翻转变换动画特效的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: html认识数字游戏大全,认识数字小游戏
- 下一篇: 跟随鼠标走的文字的html代码,跟随鼠标