今天我们将使用页面元素的翻转效果设计一个微博和轻博网站列表，将使用jQuery的来实现特效。
HTML代码
这里我们使用socialwrapper来包装每一个需要展示的网站，如下：
以上代码中我们包含了执
行翻转的元素social，其中包含了logo图片和网站详细介绍。
CSS代码
.socialwrapper{ width:200px; height:200px; float:left; margin:5px; position:relative; cursor:pointer;}.social{ background: #303030; height: 100%; margin: 0px; text-align: center; width:100%; margin: 0px; position:absolute; border: 1px solid #505050; border-radius: 5px 5px 5px 5px;}
上面的CSS定义了.socialwrapper和.social的样式定义。这里我们使用圆角效果。
.social:hover { border:1px solid #505050; -moz-box-shadow:0 0 20px #AAA inset; -webkit-box-shadow:0 0 20px #AAA inset; box-shadow:0 0 20px #AAA inset;}
以上代码定义了鼠标悬浮的特效，这里我们使用box-shadow属性来设置边框阴影效果。
.social .desc{ color: #fff; font-size: 20px; height: 200px; line-height: 200px; margin: 0 auto; min-height: 200px; min-width: 200px; text-align: center; width: 200px; float:left; position: absolute; background: #404040; display:none; font-size:14px; font-weight: 600; font-family: "Microsoft Yahei"; padding:0; text-shadow: 2px 2px 1px #606060;}
以上代码定义了详细信息内容，这里使用了text-shadow来定义一个字体的阴影效果。
jQuery代码
$(function(){ $(".social").toggle(function(){ var me = $(this); me.flip({ direction:'lr', speed: 300, color:'#505050', onEnd: function(){ me.find("img").toggle(); me.find(".desc").toggle(); } }); },function(){ var me = $(this); me.flip({ direction:'rl', speed: 300, color:'#303030', onEnd: function(){ me.find("img").toggle(); me.find(".desc").toggle(); } }); });});
jQuery代码比较简单，调用flip插件的方法，执行翻转效果，并且toggle图片和描述内容。
选项说明：
- direction：代表翻转方向，这里是先左向右（Left to Right），然后，右向左（Right to Left）
- speed：翻转速度
- onBefore, onAnimation, onEnd：分别执行动画开始前，执行一半和结束后的回调函数
- content：翻转后的内容
- color：翻转后的颜色