Home » jQuery 外掛

[jQ]Favicon 0.2.1

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



Favicon 套件除了可以動態改變 favicon 之外，也可以利用 Canvas 的方式來繪出想要的內容，並一直輪播切換顯示喔。

套件名稱：Favicon
套件版本：0.2.1
作者網站：http://hellowebapps.com/products/jquery-favicon/
套件網址：N/A
發佈日期：2012-02-20
檔案大小：4.31 KB
檔案下載：jquery.favicon.js

參數選項說明：

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

iconURL(選填)
描述： 預設要顯示的 favicon
預設值： 無
 
eachCallback(選填)
描述： 若瀏覽器不支援 Canvas 的話, 備用的 favicon
預設值： 無
 
onDraw(選填)
描述： 要套用在 favicon 上的自訂繪圖方法
預設值： 無
 
interval(選填)
描述： 多久切換一次 favicon(當使用動畫方式時的選項)
預設值： 1000
 
onDraw(選填)
描述： 要套用在每一次 favicon 上的自訂繪圖方法(當使用動畫方式時的選項)
預設值： 無
 
onStop(選填)
描述： 當動畫停止時要執行的方法(當使用動畫方式時的選項)
預設值： 無
 
frames(選填)
描述： 要顯示那幾格圖示及順序(當使用動畫方式時的選項)
預設值： 顯示全部

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8

// 繪出指定的 favicon
$.favicon(iconURL, alternateURL, onDraw);
 
// 畫切換顯示 favicon
$.favicon.animate(animationURL, alternateURL, options);
 
// 停止動畫切換顯示 favicon
$.favicon.unanimate();

使用範例：

檢視原始碼 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="jquery.favicon.js"></script>
<script type="text/javascript">
	$(function(){
		$('#show').click(function(){
			// 改變 favicon
			$.favicon('images/favicon.ico');
		});
 
		var bool = false;
		$('#animate').click(function(){
			if(bool){
				bool = false;
				// 停止 favicon 動畫
				$.favicon.unanimate();
				return ;
			}
 
			bool = true;
			var count = 0;
			// 開始進行 favicon 動畫
			// 同時若亂數值大於 0.85 則 count + 1
			$.favicon.animate('images/mail_icon_32_new_message_animation.png', 'images/mail_icon_32_new_message.png', {
				frames: [1, 0],
				interval: 500,
				onDraw: function (ctx) {
				ctx.font = 'bold 15px "helvetica", sans-serif';
				ctx.fillStyle = '#333333';
				ctx.fillText(count, 10, 27);
				if (Math.random() > .85)
					count++;
				},
				onStop: function () {
					$.favicon('images/mail_icon_32.png');
				}
			});
		});
	});
</script>
 
<body>
	<button id="show">顯示 Favicon</button>
	<br />
	<br />
	<button id="animate">Favicon 動畫</button>
</body>
範例 1

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

備註：
支援的瀏覽器有 Firefox、Chrome 及 Opera。不過筆者在 Chrome 中要測試動畫切換的方式是失敗的!!

發表迴響