欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

通過JQuery實(shí)現(xiàn)win8一樣酷炫的動(dòng)態(tài)磁貼效果(示例代碼)

 更新時(shí)間：2013年07月13日 10:19:38   作者：  
相信大家喜歡這個(gè)界面無(wú)非也是喜歡它的動(dòng)態(tài)磁貼。剛好今天研究了一下如何通過JQuery在網(wǎng)頁(yè)上模仿這種效果，就貼出來(lái)給大家噴一下。雖然是一些很低級(jí)的技術(shù)，但是也希望有需要的朋友可以參考下

我個(gè)人表示非常喜歡微軟新一代的產(chǎn)品，先不管它產(chǎn)品的成熟與否，但是它帶來(lái)的是全新的產(chǎn)品。所謂全新，是指在用戶體驗(yàn)上，蘋果這些年的成功使得所有產(chǎn)品都在模仿它的界面，包括安卓在內(nèi)，不知道大家的感覺如何，反正我是對(duì)這些圓角矩形產(chǎn)生了審美疲勞（蘋果以及安卓的粉絲勿噴，這里僅僅是從界面上評(píng)價(jià)，事實(shí)上從整體上來(lái)說，微軟還是有差距的），當(dāng)年wp的推出讓我眼前一亮，馬上喜歡上了Metro風(fēng)格的產(chǎn)品，直至今天wp8以及win8開始越來(lái)越成熟。

寫的不好，歡迎各位看官指正批評(píng)，不歡迎無(wú)故猛噴。大神請(qǐng)繞道。

廢話少說，進(jìn)入正題。基本思想是：定義一個(gè)外層div，固定高度（例如本例中的180px）并設(shè)置屬性overflow:hidden（隱藏超出邊框的部分），然后在這個(gè)div里面定義一個(gè)內(nèi)層div，并設(shè)置屬性position:relative（采用相對(duì)布局）。在這個(gè)內(nèi)層div里面，我們定義一張圖片，注意要設(shè)置它的高度跟外層div高度一樣（如本例中的180px），再定義一個(gè)div放文字，該div的高度也和外層div高度一樣（如本例中的180px，如果你給了一個(gè)padding，則高度相應(yīng)減小，以達(dá)到整個(gè)div是180px的高度）。布局代碼如下所示
html:

復(fù)制代碼 代碼如下:

<div id="outside">
    <div id="inside">
        <img width="180px" height="180px" src="http://xxxxxxxxx圖片地址" />
        <div id="text">
            <span>通過JQuery實(shí)現(xiàn)win8一樣酷炫的動(dòng)態(tài)磁貼效果</span>
            <p>林宇</p>
            <p>我個(gè)人表示非常喜歡微軟新一代的產(chǎn)品……</p>
        </div>
    </div>
</div>

css:
復(fù)制代碼 代碼如下:

#outside
{
    height:180px;
    overflow:hidden;
}
#inside
{
    position:relative;
}
#text
{
    width:160px;
    height:160px;
    background:#0000ff;
    padding:10px;
    color:#fff;
}

剩下來(lái)的就是JQuery的事情了。首先先理解一下這個(gè)“動(dòng)態(tài)磁貼”的動(dòng)作：一開始顯示一張圖片，然后向上滑動(dòng)顯示文字，停留一會(huì)，再向下滑動(dòng)顯示圖片，如此循環(huán)。我們先定義一個(gè)函數(shù)：
復(fù)制代碼 代碼如下:

function go(id, d1, px1, val1, d2, px2, val2) {
    $(id).delay(d1);
    $(id).animate({ bottom: px1 }, val1, function () {
        $(id).delay(d2);
        $(id).animate({ bottom: px2 }, val2);
    });
}

這里有7個(gè)參數(shù)，id是內(nèi)層div也就是要滑動(dòng)的div的id，d1是內(nèi)層div滑上去以后停留的時(shí)間，px1是內(nèi)層div要向上滑動(dòng)的相對(duì)位置，默認(rèn)當(dāng)前位置為0px，val1是內(nèi)層div的完成向上滑動(dòng)動(dòng)作所需要的時(shí)間，d2是向下滑動(dòng)div后停留的時(shí)間，px2是向下滑動(dòng)的相對(duì)位置，這里依然是以原來(lái)的位置為0px，val2是完成向下滑動(dòng)所需的時(shí)間。

然后我們?cè)陧?yè)面加載完成的時(shí)候設(shè)置一個(gè)定時(shí)器，來(lái)執(zhí)行我們定義的go函數(shù)：

復(fù)制代碼 代碼如下:

$(function () {
    timer1 = setInterval(function () {
        go("#inside", 1500, "180px", 1200, 1000, "0px", 2000);
    }, 3000);
});

這里的參數(shù)可以根據(jù)需要進(jìn)行修改，這里我們讓定時(shí)器每3秒執(zhí)行一次go函數(shù)。
源碼基本都貼出來(lái)了，有需要源文件的童鞋可以猛擊這里下載。

相關(guān)文章

最新評(píng)論