Home » jQuery 外掛

[jQ]Textualizer 2.3.1

範例 1
沒錯!只要 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 的迴響

  1. 回樓上,我測過了,中文字可以!!

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

發表迴響