Home » jQuery 外掛

[jQ]jqFloat.js 1.0

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



現在很多網頁都會加上一些小小的循環動畫，而 jqFloat.js 套件就是用來協助各位開發者做出浮動動畫效果。

套件名稱：jqFloat.js
套件版本：1.0
作者網站：http://www.inwebson.com/jquery/jqfloat-js-a-floating-effect-with-jquery/
套件網址：N/A
發佈日期：2012-03-20
檔案大小：3.44 KB
檔案下載：jqfloat.js

參數選項說明：

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

width(選填)
描述： 元素可水平移動的最大距離
預設值： 100
 
height(選填)
描述： 元素可垂直移動的最大距離
預設值： 100
 
speed(選填)
描述： 移動的速度(1000毫秒 = 1秒)
預設值： 1000
 
minHeight(選填)
描述： 元素距離網頁底部的距離
預設值： 0

方法說明：

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

// 把指定的元素轉換成 jqFloat 效果
$(selector).jqFloat(method, options);
 
// 執行 jqFloat 動畫
$(selector).jqFloat('play');
 
// 暫停 jqFloat 動畫
$(selector).jqFloat('stop');
 
// 更新 jqFloat 動畫設定
$(selector).jqFloat('update', 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqfloat.js"></script>
<style type="text/css">
	.cloud{
		width: 104px;
		height: 66px;
		background: url(sprite.png) no-repeat 0 0;
		position: absolute;
		z-index: 10;
	}
	#cloud1{
		top: 17%;
		left: 22%;
		z-index: 3;
	}
	#cloud2{
		top: 10%;
		left: 50%;
	}
	#cloud3{
		top: 20%;
		right: 17%;
	}
	#cloud4{
		top: 13%;
		right: 12%;
		z-index: 5;
	}
	#sun{
		width: 106px;
		height: 105px;
		background: url(sprite.png) no-repeat 0 -120px;
		position: absolute;
		z-index: 8;
		top: 12%;
		right: 15%;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 讓每 .cloud 都產生 jqFloat 效果
		$('.cloud').each(function() {
			$(this).jqFloat({
				width: Math.floor(Math.random()*10)*10,
				height: 10,
				speed: Math.floor(Math.random()*10)*100 + 500
			});
		});
 
		// 讓 #sun 產生 jqFloat 效果, 但只能上下移動
		$('#sun').jqFloat({
			width: 0,
			height: 50,
			speed: 1800
		});
	});
</script>
 
<body>
	<div id="sky">
		<div id="cloud1" class="cloud"></div>
		<div id="cloud2" class="cloud"></div>
		<div id="cloud3" class="cloud"></div>
		<div id="cloud4" class="cloud"></div>
		<div id="sun"></div>
	</div>
</body>
範例 1

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

4 筆針對 [jQ]jqFloat.js 1.0 的迴響

  2. 你好! 在貴站看到很多jQuery的範例，想請問一下，你有在接案嗎? 我們想做一個html5 scroll的網站，
    這是我的msn，再請你連絡，謝謝。

發表迴響