Home » jQuery 外掛

[jQ]Flip! 0.9.9

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



如果想讓區塊能進行翻轉效果，且還要支援像是 IE6 等的古老瀏覽器的話，那麼就一定要來試試 Flip!。它利用了 borderWidth 的技巧來模擬出翻轉時的傾斜效果，讓區塊看起來就是翻轉一樣。不過若要真的翻的漂亮，建議還是直改用 CSS3 吧！

套件名稱：Flip!
套件版本：0.9.9
作者網站：http://lab.smashup.it/flip/
套件網址：N/A
發佈日期：2009-11-09
檔案大小：11.4 KB
檔案下載：jquery.flip.js
引用檔案：jquery-ui.min.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

content(選填)
描述： 當翻轉後要顯示的內容, 可以是 html 或單純的文字內容, 也可以接受 jQuery 物件
預設值： 目前區塊的內容
 
direction(選填)
描述： 翻轉的方向, 接受的值有: 'tb', 'bt', 'lr' 及 'rl'
預設值： 'tb'
 
bgColor(選填)
描述： 翻轉時的背景顏色
預設值： '#999'
 
color(選填)
描述： 翻轉結束後的區塊背景顏色
預設值： 目前區塊的背景顏色
 
speed(選填)
描述： 翻轉速度(1000毫秒 = 1秒)
預設值： 500
 
onBefore(選填)
描述： 當翻轉開始時要執行的動作
預設值： function(){}
 
onEnd(選填)
描述： 當翻轉結束後要執行的動作
預設值： function(){}
 
onAnimation(選填)
描述： 當翻轉到一半時要執行的動作
預設值： function(){}

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5

// 讓指定的區塊進行翻轉動作
$(selector).flip(settings);
 
// 還原指定區塊上一次的翻轉動作
$(selector).revertFlip();

使用範例：

檢視原始碼 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.flip"></script>
<style type="text/css">
	#flipbox {
		width: 450px;
		height: 250px;
		line-height: 250px;
		background-color: #ff9000;
		font-family: 'ChunkFive Regular', Tahoma, Helvetica;
		font-size: 24px;
		color: #ffffff;
		text-align: center;
	}
	#flipPad {
		margin: 15px 0;
		width: 450px;
		text-align: center;
	}
	#flipPad a {
		padding: 5px 15px;
		background: #1e90ff;
		border: 2px solid #1e90ff;
		border-radius: 2px;
		color: #ffffff;
		font-weight: bold;
		text-decoration: none;
		font-size: 1em;
		font-family: Helvetica, Tahoma, Verdana, sans-serif;
		line-height: 30px;
		height: 30px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		-moz-box-shadow: 1px 1px 2px #999999;
		-webkit-box-shadow: 1px 1px 2px #999999;
		-webkit-transition-duration: 1s;
	}
	#flipPad a:hover {
		background-color: #ff9000;
		border: 2px solid #ff9000;
	}
	#flipPad .revert {
		background-color: #ff9000;
		border: 2px solid #ff9000;
		display: none;
	}
	.a {
		display: none;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 往左翻轉
		$('.left').click(function(){
			$('#flipbox').flip({
				direction: 'rl', 
				color: '#39AB3E', 
				content: '左翻轉~',
				onBefore: function(){
					$(".revert").show();
				}
			});
		});
 
		// 往右翻轉, 翻轉後看到的是 .a 區塊中的內容
		$('.right').click(function(){
			$('#flipbox').flip({
				direction: 'lr', 
				content: $('.a'),
				onBefore: function(){
					$(".revert").show();
				}
			});
		});
 
		// 往上翻轉
		$('.top').click(function(){
			$('#flipbox').flip({
				direction: 'bt', 
				color: '#B0EB17', 
				content: '往上翻轉~',
				onBefore: function(){
					$(".revert").show();
				}
			});
		});
 
		// 往下翻轉
		$('.bottom').click(function(){
			$('#flipbox').flip({
				direction: 'tb', 
				color: '#82BD2E', 
				content: '往下翻轉~',
				onBefore: function(){
					$(".revert").show();
				}
			});
		});
 
		// 回復上一次的動作
		$('.revert').click(function(){
			$('#flipbox').revertFlip();
			return false;
		});
	});
</script>
 
<body>
	<div id="flipbox">嘿～我是一個可以翻轉的區塊喔! :)</div>
	<div id="flipPad"> 
		<a href="#" class="left">left</a> 
		<a href="#" class="top">top</a> 
		<a href="#" class="bottom">bottom</a> 
		<a href="#" class="right">right</a> 
		<a href="#" class="revert">revert!</a> 
	</div>
	<div class="a">
		<img src="a.jpg" />
	</div>
</body>
範例 1

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

發表迴響