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

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

?

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

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

?

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

?

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

$(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);}});});

?

?详细 见 源码