Home » jQuery 外掛

[jQ]blur.js 0.1

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



人家都說朦朧美，那麼在網頁中要在圖片上套用朦朧的效果的話，blurjs 就是一個很方便的套件。除了可以自訂模糊遮罩的顏色及透明度之外，也能利用 jQuery UI 的功能來讓模糊遮罩可以拖移哩。

套件名稱：blurjs
套件版本：0.1
作者網站：http://blurjs.com/
套件網址：N/A
發佈日期：2011-01-27
檔案大小：9.90 KB
檔案下載：blur.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
28
29
30
31
32
33
34
35

source(選填)
描述： 背景要套用模糊效果的元素
預設值： 'body'
 
radius(選填)
描述： 模糊度
預設值： 5
 
overlay(選填)
描述： 模糊遮罩的顏色，可使用 CSS3 的 rga() 及 rgba()
預設值： ''
 
offset(選填)
描述： 模糊遮罩中背景圖片的座標位置
預設值： { x: 0, y: 0 }
 
optClass(選填)
描述： 要額外加到模糊遮罩的 class
預設值： ''
 
cache(選填)
描述： 若設為 true 則會把加上模糊效果的影像暫存在本機(使用 HTML5 的 localStorage 機制)
預設值： false
 
cacheKeyPrefix(選填)
描述： localStorage 存取時的 key 前綴
預設值： 'blurjs-'
 
draggable(選填)
描述： 若設為 true 則模糊遮罩可被拖移(需要引用 jQuery UI)
預設值： false
 
debug(選填)
描述：若設為 true 則會利用 console.info() 等方式輸出除錯訊息
預設值： false

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定元素套上模糊效果
$(selector).blurjs(options);

使用範例：

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="blur.js"></script>
<style type="text/css">
	.demo {
		position: relative;
		width: 640px;
		height: 300px;
		background: url(images/wulai_Cherry_00.jpg) no-repeat top left;
	}
	.blur {
		position: absolute;
		top: 0;
		left: 160px;
		width: 320px;	/* 寬度只設 320px 是為了對比 */
		height: 300px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 套上模糊效果, 模糊度 10
		$('.blur').blurjs({
			source: $('.blur').parent(),
			overlay: 'rgba(255,255,255,0.1)',
			radius: 10
		});
	});
</script>
 
<body>
	<div class="demo">
		<div class="blur"></div>
	</div>
</body>
範例 1

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

發表迴響