Home » jQuery 外掛

[jQ]Flippy 1.0.1

範例 1
沒錯!只要 600 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!



Flippy 雖然跟筆者之前介紹的 Flip! 很像,但因為利用了 Canvas 來產生動畫,所以整個翻轉的效果會比 Flip!

基本上支援目前主流的各大瀏覽器,不過也因為用到了 Canvas,所以 IE8 及更早的版本就不支援了。除非額外引用了 ExplorerCanvas

套件名稱:Flippy
套件版本:1.0.1
作者網站:http://blog.guilhemmarty.com/flippy/
套件網址:N/A
發佈日期:2012-02-11
檔案大小:12.5 KB
檔案下載:jquery.flippy.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
36
37
38
39
color_target(選填)
描述: 翻轉結束後的區塊背景顏色
預設值: "white"
 
content(選填)
描述: 當翻轉後要顯示的內容, 可以是 html 或單純的文字內容, 也可以接受 jQuery 物件
預設值: ""
 
direction(選填)
描述: 翻轉的方向, 接受的值有:  "RIGHT""LEFT""BOTTOM""TOP"
預設值: "LEFT"
 
duration(選填)
描述: 翻轉速度(1000毫秒 = 1秒)
預設值: 300
 
depth(選填)
描述: 翻轉時的變形效果(試著自己加調整加大後看效果)
預設值: 0.12
 
light(選填)
描述: 翻轉時的光線及陰影強度(試著自己加調整加大後看效果)
預設值: 60
 
refresh_rate(選填)
描述: 翻轉更新頻率(數字越小越慢)
預設值: 15
 
onStart(選填)
描述: 當翻轉開始時要執行的動作
預設值: function(){}
 
onMidway(選填)
描述: 當翻轉到一半時要執行的動作
預設值: function(){}
 
onFinish(選填)
描述: 當翻轉結束後要執行的動作
預設值: function(){}

方法說明:

檢視原始碼 JavaScript
1
2
// 讓指定元素進行翻轉
$(selector).flippy(opts);

使用範例:

檢視原始碼 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
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flippy.js"></script>
<style type="text/css">
#flippyBox{
	background: #b6d635;
	color: #333;
	font-size: 20px;
	min-width: 500px;
	width: 500px;
	min-height: 300px;
	height: 300px;
	text-align: center;
	line-height: 300px;
	margin: 0 auto;
}
#flippyBox .top{	/* 翻轉後內容元素會套上相對應方向的 className */
	padding: 5px;
}
#flippyBox .left, #flippyBox .bottom{	/* 翻轉後內容元素會套上相對應方向的 className */
	text-align: center;
	color: #fff;
}
#flippyButtons{
	text-align: center;
	line-height: 20px;
	margin-top: 20px;
}
.flippyButton{
	background: #333;
	color: #fff;
	padding: 5px 10px;
	margin: 0 5px;
}
.flippyButton:hover{
	text-decoration: none;
	background: #333;
}
#flippyContents{
	display: none;
}
</style>
<script type="text/javascript">
	$(function(){
		// 按下 left 鈕時
		$('#flippyGoLeft').click(function(e){
			e.preventDefault();
 
			// 向左翻轉後的顏色變為 black, 且內容來源為 #flippyContentLeft
			$('#flippyBox').flippy({
				color_target: 'black',
				content: $('#flippyContentLeft'),
				direction: 'LEFT',
				duration: '750'
			});
		});
 
		// 按下 top 鈕時
		$('#flippyGoTop').click(function(e){
			e.preventDefault();
 
			// 向上翻轉後內容變更為 <img class="top" src="sunsangNX200_01.jpg" alt="Aston Martin"/>
			// 當翻轉完後淡入
			$('#flippyBox').flippy({
				content: '<img class="top" src="sunsangNX200_01.jpg" alt="Aston Martin"/>',
				direction: 'TOP',
				duration: '750',
				onFinish:function(){
					$('#flippyBox .top').hide().fadeIn(300);
				}
			});
		});
 
		// 按下 bottom 鈕時
		$('#flippyGoBottom').click(function(e){
			e.preventDefault();
 
			// 向下翻轉後的顏色變為 #333333, 且內容來源為 #flippyContentBottom
			$('#flippyBox').flippy({
				color_target: '#333333',
				content: $('#flippyContentBottom'),
				direction: 'BOTTOM',
				duration: '750'
			});
		});
 
		// 按下 right 鈕時
		$('#flippyGoRight').click(function(e){
			e.preventDefault();
 
			// 向右翻轉後的顏色變為 #b6d635, 且內容變更為 Awesome !
			$('#flippyBox').flippy({
				color_target: '#b6d635',
				content: 'Awesome !',
				direction: 'RIGHT',
				duration: '750'
			});
		});
	});
</script>
 
<body>
	<div id="flippyBox">Flippy Box</div>
 
	<div id="flippyButtons">
		<a id="flippyGoLeft" class="flippyButton" href="#">Left</a>
		<a id="flippyGoTop" class="flippyButton" href="#">Top</a>
		<a id="flippyGoBottom" class="flippyButton" href="#">Bottom</a>
		<a id="flippyGoRight" class="flippyButton" href="#">Right</a>
	</div>
 
	<div id="flippyContents">
		<div id="flippyContentLeft" class="flippyContent">
			<div class="left">翻轉後的來源可以是指定區塊的內容</div>
		</div>
		<div id="flippyContentBottom" class="flippyContent">
			<div class="bottom">翻滾吧!阿信</div>
		</div>
	</div>
</body>
範例 1

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

發表迴響