使用jQuery和CSS3創(chuàng)建一個支持翻轉(zhuǎn)效果的微/輕博客網(wǎng)站列表

今天我們將使用頁面元素的翻轉(zhuǎn)效果設(shè)計一個微博和輕博網(wǎng)站列表，將使用jQuery的jQuery Flip插件來實現(xiàn)特效。

今天我們將使用頁面元素的翻轉(zhuǎn)效果設(shè)計一個微博和輕博網(wǎng)站列表，將使用jQuery的jQuery Flip插件來實現(xiàn)特效。

HTML代碼

這里我們使用socialwrapper來包裝每一個需要展示的網(wǎng)站，如下：

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

以上代碼中我們包含了執(zhí)

行翻轉(zhuǎn)的元素social，其中包含了logo圖片和網(wǎng)站詳細介紹。

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屬性來設(shè)置邊框陰影效果。

.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;
}

以上代碼定義了詳細信息內(nèi)容，這里使用了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代碼比較簡單，調(diào)用flip插件的方法，執(zhí)行翻轉(zhuǎn)效果，并且toggle圖片和描述內(nèi)容。

選項說明：

direction：代表翻轉(zhuǎn)方向，這里是先左向右（Left to Right），然后，右向左（Right to Left）
speed：翻轉(zhuǎn)速度
onBefore, onAnimation, onEnd：分別執(zhí)行動畫開始前，執(zhí)行一半和結(jié)束后的回調(diào)函數(shù)
content：翻轉(zhuǎn)后的內(nèi)容
color：翻轉(zhuǎn)后的顏色

posted @ 2012-04-10 21:38 igeekbar 閱讀(3315) 評論(0) 收藏舉報

刷新頁面返回頂部

使用jQuery和CSS3創(chuàng)建一個支持翻轉(zhuǎn)效果的微/輕博客網(wǎng)站列表

HTML代碼

CSS代碼

jQuery代碼

公告

中文互聯(lián)： GBin1.com | RSS訂閱 | 郵件訂閱 | 手機訂閱