Textualizer 是一個很輕量級的文字變換效果。可以針對指定的字串陣列資料來一一進行動畫的切換顯示,除了內建的效果外,也支援自行擴充咧!
套件名稱:Textualizer
套件版本:2.3.1
作者網站:http://kiro.me/textualizer/
套件網址:N/A
發佈日期:2012-02-01
檔案大小:17.8 KB
檔案下載:textualizer.js
參數說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | duration(選填) 描述: 每組字串停留的時間;單位毫秒(1000毫秒 = 1秒) 預設值: 2000 rearrangeDuration(選填) 描述: 每組字串切換的停留時間;單位毫秒(1000毫秒 = 1秒) 預設值: 1000 effect(選填) 描述: 每組字串切換的效果, 可自行擴充;預設允許的值有: 'fadeIn', 'slideLeft', 'slideTop' 及 'random' 預設值: 'random' centered(選填) 描述: 字串顯示的位置是否在區塊垂直置中的位置 預設值: 無 |
方法說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // 初使化設定 $(selector).textualizer(data, options); // 開始輪播 $(selector).textualizer('start'); // 暫停輪播 $(selector).textualizer('pause'); // 停止輪播 $(selector).textualizer('stop'); // 銷燬 textualizer 設定 $(selector).textualizer('destroy'); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="textualizer.js"></script> <style type="text/css"> #txtlzr { font-family: Helvetica,Arial,sans-serif; font-size: 30px; color: #333; width: 700px; height: 120px; } </style> <script type="text/javascript"> $(function() { // 要顯示的訊息字串 var list = [ 'Textualizer is a jQuery plug-in that allows you to transition through blurbs of text. Just like this...', 'When transitioning to a new blurb, any character that is common to the next blurb is kept on the screen, and moved to its new position.', 'Textualize: verb - to put into text, set down as concrete and unchanging. Use Textualizer to transition through blurbs of text.', 'Blurb: noun - a short summary or some words of praise accompanying a creative work. A promotional description.' ]; // 要用來顯示的區塊 var $txt = $('#txtlzr'); // 套上 textualizer 效果 // 並指定字串陣列及設定 $txt.textualizer(list, { duration: 3000 }); // 開始輪播 $txt.textualizer('start'); }); </script> <body> <div id="txtlzr"></div> </body> |
那請問這個jQ效果支援中文字嗎?
這..直接試不就可以知道結果了嗎XD
回樓上,我測過了,中文字可以!!
另外想請問男丁格爾先生,我希望文字可以換行,
可是加"\n"卻仍然沒用耶.......
請問是不是此語法就是不能換行呢??
謝謝
看來目前是不行, 若要能換行的話, 看來是要額外再改程式才行
請問 這JQ該怎麼設定 文字置中?