Home » jQuery 外掛

[jQ]jAni jQuery Plugin

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



jAni 是一個很有趣的外掛，透過背景圖片的運用來達到像是播放動畫的效果。不僅能控制播放與否，甚至像是暫停或是停止播放都能輕易的實現。

但要注意的是，各位設計的每一格影格是要拆開且往垂直的方式來排列。

套件名稱：jAni
套件版本：N/A
作者網站：http://www.ajaxblender.com/jani.html
套件網址：N/A
發佈日期：2009-11-23
檔案大小：2.03 KB
檔案下載：jani.js

參數說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

frameWidth(選填)
描述： 單一影格的寬
預設值： 100
 
frameHeight(選填)
描述： 單一影格的高
預設值： 100
 
speed(選填)
描述： 動畫播放的速度
預設值： 100
 
totalFrames(選填)
描述： 共有多少影格
預設值： 0
 
loop(選填)
描述： 是否循環播放
預設值： true

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 初始化設定
$(selector).jani(sett);
 
// 播放動畫
$(selector).jani.play();
 
// 暫停播放動畫
$(selector).jani.pause();
 
// 停止播放動畫
$(selector).jani.stop();
 
// 播放動畫
$(selector).jani.play();

使用範例：

檢視原始碼 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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jani.js"></script>
<style type="text/css">
	.animation-1 {
        background: url(images/sample-animation.gif) no-repeat left top;
    }
</style>
<script type="text/javascript">
	$(function(){
		// 初始化
		// 設定動畫的寬高，播放速度及共幾格
		$('#animation-1').jani({
			frameWidth: 100, 
			frameHeight: 100, 
			speed: 100, 
			totalFrames: 19
		});
 
		// 當按下播放鈕時
		$('#startAnimation').click(function(){
	        $('#animation-1').jani.play();	   
            return false;
        });
 
		// 當按下暫停鈕時
        $('#pauseAnimation').click(function(){
	        $('#animation-1').jani.pause();	   
            return false;
        });
 
		// 當按下停止鈕時
        $('#stopAnimation').click(function(){
	        $('#animation-1').jani.stop();	   
            return false;
        });
	});
</script>
 
<body>
	<div id="animation-1" class="animation-1"></div>
	<div>
		<input type="button" name="startAnimation" id="startAnimation" value="開始播放動畫" />
		<input type="button" name="pauseAnimation" id="pauseAnimation" value="暫停" />
		<input type="button" name="stopAnimation" id="stopAnimation" value="停止" />
	</div>
</body>
範例 1

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

3 筆針對 [jQ]jAni jQuery Plugin 的迴響

  1. 男丁您好
    請問，這個效果有辦法做到沒有按鈕，循環播放嗎？
    對流量與執行效率方面
    放Flash、Gif或這功能那個會比較好？

    另，您之前的網站查詢器還有要更新嗎？

    感謝您的耐心與回答！謝謝......

    • 可以在一開始就執行呼叫 $(selector).jani.play(); 就能做到載入循環播放了。至於效能, 因為它本來就是用 gif 檔了, 所以若你也沒要什麼暫不暫停的功能的話, 那就直接用 gif 就好了。

      查詢器有什麼問題嗎?暫時沒更新的時程。

  2. 請問
    如果一個頁面裡面宣告兩個selector去執行jani(),會以後面的有作用，第一個就無效
    關於這樣的情況有點不解，請問有辦法在同一個畫面有多個區塊可以執行這個動畫外掛嗎?

    EX:
    $('#animation-1').jani({ frameWidth: 100, frameHeight: 100, speed: 100, totalFrames: 19 });

    $('#animation-2').jani({ frameWidth: 80, frameHeight: 120, speed: 75, totalFrames: 29 });

發表迴響