有你在真好 的个人博客
使用jQuery和CSS3创建一个支持翻转效果的微-轻博客网
阅读:2034 添加日期:3/30/2021 5:45:53 PM

使用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:翻转速度

  • onBeforeonAnimationonEnd:分别执行动画开始前,执行一半和结束后的回调函数

  • content:翻转后的内容

  • color:翻转后的颜色

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