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

在线演示  本地下载

今天我们将使用页面元素的翻转效果设计一个微博和轻博网站列表，将使用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：翻转后的颜色