[jQuery] Sponsor Flip Wall

近來因為工作需要,所以就找到了很多不同的jquery 的 plugin ,學到了很多不同的effect。 (所以之前的post 很多都是jquery 的tutorial 來呢)~

你只要一click 就會反轉,之後就會見到簡單的description~



Note: 這個只支援modern browser…. ie 6就無機會用到了,因為利用了css3。這個是利用了 jQuery Flip plug-in。

用法都十分之簡單~
HTML 的structure 就是利用 div

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div title="Click to flip" class="sponsor">
	<div class="sponsorFlip">
		<img alt="More about google" src="img/sponsors/google.png">
	</div>
 
	<div class="sponsorData">
		<div class="sponsorDescription">
			The company that redefined web search.
		</div>
		<div class="sponsorURL">
			<a href="http://www.google.com/">http://www.google.com/ </a>
		</div>
	</div>
</div>
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
body{
	/* Setting default text color, background and a font stack */
	font-size:0.825em;
	color:#666;
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;
}
 
.sponsorListHolder{
	margin-bottom:30px;
}
 
.sponsor{
	width:180px;
	height:180px;
	float:left;
	margin:4px;
 
	/* Giving the sponsor div a relative positioning: */
	position:relative;
	cursor:pointer;
}
 
.sponsorFlip{
	/*  The sponsor div will be positioned absolutely with respect
		to its parent .sponsor div and fill it in entirely */
 
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:1px solid #ddd;
	background:url("img/background.jpg") no-repeat center center #f9f9f9;
}
 
.sponsorFlip:hover{ /*而且ie6 不支援 div :hover,ie6 只支援到a:hover ,大家要留意啦*/
	border:1px solid #999;
 
	/* CSS3 inset shadow: */
	-moz-box-shadow:0 0 30px #999 inset;
	-webkit-box-shadow:0 0 30px #999 inset;
	box-shadow:0 0 30px #999 inset; /*css3...這個是for ie 的呢~ 不過就無shadow 呢*/
}
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
.sponsorFlip img{
	/* Centering the logo image in the middle of the .sponsorFlip div */
 
	position:absolute;
	top:50%;
	left:50%;
	margin:-70px 0 0 -70px;
}
 
.sponsorData{
	/* Hiding the .sponsorData div */
	display:none;
}
 
.sponsorDescription{
	font-size:11px;
	padding:50px 10px 20px 20px;
	font-style:italic;
}
 
.sponsorURL{
	font-size:10px;
	font-weight:bold;
	padding-left:20px;
}
 
.clear{
	/* This class clears the floats */
	clear:both;
}

Javscript 方面,Sponsor wall 是利用了jquery ,和jquery ui for interface. 所以大家記得 include 這兩個js 以及 css….
接著當然係 document ready 時要做的javscript 呢~

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
$(document).ready(function(){
	/* The following code is executed once the DOM is loaded */
 
	$('.sponsorFlip').bind("click",function(){
 
		// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
 
		var elem = $(this);
 
		// data('flipped') is a flag we set when we flip the element:
 
		if(elem.data('flipped'))
		{
			// If the element has already been flipped, use the revertFlip method
			// defined by the plug-in to revert to the default state automatically:
 
			elem.revertFlip();
 
			// Unsetting the flag:
			elem.data('flipped',false)
		}
		else
		{
			// Using the flip method defined by the plugin:
 
			elem.flip({
				direction:'lr',
				speed: 350,
				onBefore: function(){
					// Insert the contents of the .sponsorData div (hidden
					// from view with display:none) into the clicked
					// .sponsorFlip div before the flipping animation starts:
 
					elem.html(elem.siblings('.sponsorData').html());
				}
			});
 
			// Setting the flag:
			elem.data('flipped',true);
		}
	});
 
});

原文是利用了php 來generate data 的,不過chowky 覺得不太重要所以就算。大家有興趣可以去原文看看呢~

Source: http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/

Share
About Chowky
Chowky 希望可以透過這個blog 來分享自己學到的知識。亦希望可以分享最新的資訊。 IT 轉變得很快,要常常留意市場的變化,面對大陸的競爭,香港的 IT 方面的人才要更有市場觸覺,緊貼市塲走勢。因為其他地方的IT技術已經走得比以往更快。不進則退,就讓大家一起來交流、提昇IT的心得! Chowky 因為工作關係,所以一開始接觸的是visual basic, foxpro ( 這不代表我老 ) 之後是 .NET, MSSQL 和 Crystal Report. 由工作學到的project management, system analysis and design 以及 system testing, user acceptance tests and different documentations. 另外,由不同的freelance 方面學到dreamweaver, javascript, php, mysql. 後來興起CMS wave, Chowky 亦學會了Joomla! 以及常用的javascript framwork: jquery and mootool. 連deisgn 都要自己包辦,所以接觸了photoshop, illustrator, firework. 新的工作方面,要利用RIA -- Flex and AIR 方面的技術。所以緊接下來應該會多一點分享ria 方面的技術 Chowky 所說的未必是對的,但我深信我所說的是未來 IT Trend. 大家亦應抱著懷疑的態度去分析每一件事,未經思考不要輕易相信。

No Comments, Be The First!

Leave a Reply