Home » jQuery 外掛

[jQ]Textualizer 2.3.1

[ 日期： | 瀏覽：5,852 | 迴響：5 ]
範例 1
請協助我把這個效果加到我的網站 (只要 900 元)
沒錯!只要 900 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



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>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

5 筆針對 [jQ]Textualizer 2.3.1 的迴響

  2. 回樓上，我測過了，中文字可以!!

    另外想請問男丁格爾先生，我希望文字可以換行，
    可是加"\n"卻仍然沒用耶.......
    請問是不是此語法就是不能換行呢??
    謝謝

發表迴響