Home » jQuery 外掛

[jQ]Shuffle Letters 1.0

範例 1
沒錯!只要 500 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!



Shuffle Letters 是一個很類似 Airport 的文字顯示效果,可以把每一個英數字都進行指定次數的轉換後才顯示出正確的。

套件名稱:Shuffle Letters
套件網址:1.0
作者網站:http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
套件網址:N/A
發佈日期:2011-09-10
檔案大小:2.80 KB
檔案下載:jquery.shuffleLetters.js

參數選項說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
step(選填)
描述: 每一個字元要改變幾次
預設值: 8
 
fps(選填)
描述: 每秒影格速度(1000毫秒/fps)
預設值: 25
 
text(選填)
描述: 可用來當做要產生 Shuffle Letters 效果的內容
預設值: ""
 
callback(選填)
描述: 當執行完 Shuffle Letters 效果後要執行的函式
預設值: function(){}

方法說明:

檢視原始碼 JavaScript
1
2
// 在指定的區塊中切換顯示圖片動畫
$(selector).animateImages(path, count, interval);

使用範例:

檢視原始碼 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
39
40
41
42
43
44
45
46
47
48
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.shuffleLetters.js"></script>
<style type="text/css">
	#container{
		color: #555;
		font-size: 58px;
		margin: 0 auto;
		padding: 200px 0 100px;
		width: 650px;
		font-family: 'Open Sans Condensed',sans-serif;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 先取得 #container 及 #userText
		var container = $("#container"), 
			userText = $('#userText');
 
		// 讓 #container 開始進行 Shuffle Letters 效果
		container.shuffleLetters();
 
		// 當在輸入框中按下各種按鍵時
		userText.keypress(function(e){
			// 如果按下 Enter 時
			if(e.keyCode == 13){
				// 讓 #container 開始進行 Shuffle Letters 效果
				// 文字來源從輸入框中取得
				container.shuffleLetters({
					text: userText.val()
				});
				userText.val('');
			}
		});
 
		// 4 秒後自動顯示 'Test it for yourself!'
		setTimeout(function(){
			container.shuffleLetters({
				text: 'Test it for yourself!'
			});
		},4000);
	});
</script>
 
<body>
	<label for="userText">輸入英文/數字字句後按下 Enter:<input type="text" id="userText" /></label>
 
	<div id="container">This is a Tutorialzine Demo!</div>
</body>
範例 1

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

發表迴響