在线演示 本地下载
今天我们将使用页面元素的翻转效果设计一个微博和轻博网站列表,将使用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:翻转后的颜色