使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网

• 在线演示1

• ?

• 本地下载

• ?

今天我们将使用页面元素的翻转效果设计一个微博和轻博网站列表，将使用jQuery的jQuery Flip插件来实现特效。

HTML代码

这里我们使用socialwrapper来包装每一个需要展示的网站，如下：

<div class="socialwrapper"><div class="social"><img id="img" src="img/weibo.png" /><div class="desc"><a href="http://weibo.com/gbin1" target="_blank">http://weibo.com</a></div></div></div>

以上代码中我们包含了执行翻转的元素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：翻转后的颜色

原文链接：http://www.gbtags.com/gb/share/5848.htm