发现一款很酷的jquery 相片墙翻牌效果

可用于 企业网站中的 赞助商、 合作伙伴、 公司产品、 招聘计划等等模块

主要运用的技术有 php +CSS + Jquery插件 flip http://lab.smashup.it/flip/

实现步骤可以大致这样来讲

我们可以看到某个翻牌的div 的源码如下

Java代码

1. <spanstyle="font-size:14px;"><divtitle="Clicktoflip"class="sponsor">
2. <divclass="sponsorFlip">
3. <imgalt="Moreaboutgoogle"src="img/sponsors/google.png">
4. </div>
6. <divclass="sponsorData">
7. <divclass="sponsorDescription">
8. Thecompanythatredefinedwebsearch.
9. </div>
10. <divclass="sponsorURL">
11. <ahref="http://www.google.com/">http://www.google.com/</a>
12. </div>
13. </div>
14. </div></span>

Step 1 我们会首先建立一个 $Sponsor的数组 数组内 含有以下信息 包括logo 网址等内容

Php代码

1. <spanstyle="font-size:14px;">//Eachsponsorisanelementofthe$sponsorsarray:
3. $sponsors=array(
4. array('facebook','Thebiggestsocial..','http://www.facebook.com/'),
5. array('adobe','Theleadingsoftwarede..','http://www.adobe.com/'),
6. array('microsoft','Oneofthetopsoftwarec..','http://www.microsoft.com/'),
7. array('sony','Aglobalmultibillionelectronics..','http://www.sony.com/'),
8. array('dell','Oneofthebiggestcomputerdevelo..','http://www.dell.com/'),
9. array('ebay','Thebiggestonlineauctionand..','http://www.ebay.com/'),
10. array('digg','Oneofthemostpopularweb2.0..','http://www.digg.com/'),
11. array('google','Thecompanythatredefinedw..','http://www.google.com/'),
12. array('ea','Thebiggestcomputergamemanufacturer.','http://www.ea.com/'),
13. array('mysql','Themostpopularopensourcedat..','http://www.mysql.com/'),
14. array('hp','Oneofthebiggestcomputermanufacturers.','http://www.hp.com/'),
15. array('yahoo','Themostpopularnetworkofso..','http://www.yahoo.com/'),
16. array('cisco','Thebiggestnetworkingandco..','http://www.cisco.com/'),
17. array('vimeo','Apopularvideo-centricsocialn..','http://www.vimeo.com/'),
18. array('canon','Imagingandopticaltechnologyma..','http://www.canon.com/')
19. );
21. //Randomizingtheorderofsponsors:
23. shuffle($sponsors);</span>

Step2 然后我们会通过遍历整个数组在页面中展示出来

Php代码

1. <spanstyle="font-size:14px;">//Loopingthroughthearray:
3. foreach($sponsorsas$company)
4. {
5. echo'
6. <divclass="sponsor"title="Clicktoflip">
7. <divclass="sponsorFlip">
8. <imgsrc="img/sponsors/'.$company[0].'.png"alt="Moreabout'.$company[0].'"/>
9. </div>
11. <divclass="sponsorData">
12. <divclass="sponsorDescription">
13. '.$company[1].'
14. </div>
15. <divclass="sponsorURL">
16. <ahref="'.$company[2].'">'.$company[2].'</a>
17. </div>
18. </div>
19. </div>
21. ';
22. }</span>

Step 3用到的css 样式如下

Html代码

1. <spanstyle="font-size:14px;">body{
2. /*Settingdefaulttextcolor,backgroundandafontstack*/
3. font-size:0.825em;
4. color:#666;
5. background-color:#fff;
6. font-family:Arial,Helvetica,sans-serif;
7. }
9. .sponsorListHolder{
10. margin-bottom:30px;
11. }
13. .sponsor{
14. width:180px;
15. height:180px;
16. float:left;
17. margin:4px;
19. /*Givingthesponsordivarelativepositioning:*/
20. position:relative;
21. cursor:pointer;
22. }
24. .sponsorFlip{
25. /*Thesponsordivwillbepositionedabsolutelywithrespect
26. toitsparent.sponsordivandfillitinentirely*/
28. position:absolute;
29. left:0;
30. top:0;
31. width:100%;
32. height:100%;
33. border:1pxsolid#ddd;
34. background:url("img/background.jpg")no-repeatcentercenter#f9f9f9;
35. }
37. .sponsorFlip:hover{
38. border:1pxsolid#999;
40. /*CSS3insetshadow:*/
41. -moz-box-shadow:0030px#999inset;
42. -webkit-box-shadow:0030px#999inset;
43. box-shadow:0030px#999inset;
44. }
45. /////////////////////////////////////////////////////////////////
46. .sponsorFlipimg{
47. /*Centeringthelogoimageinthemiddleofthe.sponsorFlipdiv*/
49. position:absolute;
50. top:50%;
51. left:50%;
52. margin:-70px00-70px;
53. }
55. .sponsorData{
56. /*Hidingthe.sponsorDatadiv*/
57. display:none;
58. }
60. .sponsorDescription{
61. font-size:11px;
62. padding:50px10px20px20px;
63. font-style:italic;
64. }
66. .sponsorURL{
67. font-size:10px;
68. font-weight:bold;
69. padding-left:20px;
70. }
72. .clear{
73. /*Thisclassclearsthefloats*/
74. clear:both;
75. }</span>

Step4 主要运用的jquey 方法如下

Html代码

1. <spanstyle="font-size:14px;">$(document).ready(function(){
2. /*ThefollowingcodeisexecutedoncetheDOMisloaded*/
4. $('.sponsorFlip').bind("click",function(){
6. //$(this)pointtotheclicked.sponsorFlipelement(cachingitinelemforspeed):
8. varelem=$(this);
10. //data('flipped')isaflagwesetwhenwefliptheelement:
12. if(elem.data('flipped'))
13. {
14. //Iftheelementhasalreadybeenflipped,usetherevertFlipmethod
15. //definedbytheplug-intoreverttothedefaultstateautomatically:
17. elem.revertFlip();
19. //Unsettingtheflag:
20. elem.data('flipped',false)
21. }
22. else
23. {
24. //Usingtheflipmethoddefinedbytheplugin:
26. elem.flip({
27. direction:'lr',
28. speed:350,
29. onBefore:function(){
30. //Insertthecontentsofthe.sponsorDatadiv(hidden
31. //fromviewwithdisplay:none)intotheclicked
32. //.sponsorFlipdivbeforetheflippinganimationstarts:
34. elem.html(elem.siblings('.sponsorData').html());
35. }
36. });
38. //Settingtheflag:
39. elem.data('flipped',true);
40. }
41. });
43. });</span>
    

• demo.zip (37.7 KB)
• 下载次数: 177