使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表
原文地址：http://www.gbtags.com/gb/share/5848.htm
今天我们将使用页面元素的翻转效果设计一个微博和轻博网站列表，将使用jQuery的jQuery Flip插件来实现特效。
HTML代码
这里我们使用socialwrapper来包装每一个需要展示的网站，如下：
- <divclass="socialwrapper">
- <divclass="social">
- <imgid="img"src="img/weibo.png"/>
- <divclass="desc"><ahref="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:5px5px5px5px;
- }
上面的CSS定义了.socialwrapper和.social的样式定义。这里我们使用圆角效果。
- .social:hover {
- border:1px solid #505050;
- -moz-box-shadow:0020px#AAA inset;
- -webkit-box-shadow:0020px#AAA inset;
- box-shadow:0020px#AAA inset;
- }
以上代码定义了鼠标悬浮的特效，这里我们使用box-shadow属性来设置边框阴影效果。
- .social .desc{
- color:#fff;
- font-size:20px;
- height:200px;
- line-height:200px;
- margin:0auto;
- 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:2px2px1px#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：翻转后的颜色
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17