通過JQuery實現win8一樣酷炫的動態磁貼效果

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

相信大家喜歡這個界面無非也是喜歡它的動態磁貼。剛好今天研究了一下如何通過JQuery在網頁上模仿這種效果，就貼出來給大家噴一下（我相信不少所謂大神都比較喜歡噴人，我的上一篇博客就被噴得體無完膚，當然真正的大神是不會噴人的，因為他們都明白路是怎樣走過來的，每個人都是從菜鳥過來，將心比心）。雖然是一些很低級的技術，但是我知道，還是有一些菜鳥級的童鞋會看到我的文章的，只要有一個人覺得對他有用，我的這篇文章就算是對園子做了貢獻，任憑其他千百人怎么噴。

寫的不好，歡迎各位看官指正批評，不歡迎無故猛噴。大神請繞道。

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

html:

<div id="outside">
    <div id="inside">
        <img width="180px" height="180px" src="http://pic.cnitblog.com/avatar/505350/20130316011725.png" />
        <div id="text">
            <span>通過JQuery實現win8一樣酷炫的動態磁貼效果</span>
            <p>林宇</p>
            <p>我個人表示非常喜歡微軟新一代的產品……</p>
        </div>
    </div>
</div>

css:

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

 

剩下來的就是JQuery的事情了。首先先理解一下這個“動態磁貼”的動作：一開始顯示一張圖片，然后向上滑動顯示文字，停留一會，再向下滑動顯示圖片，如此循環。我們先定義一個函數：

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個參數，id是內層div也就是要滑動的div的id，d1是內層div滑上去以后停留的時間，px1是內層div要向上滑動的相對位置，默認當前位置為0px，val1是內層div的完成向上滑動動作所需要的時間，d2是向下滑動div后停留的時間，px2是向下滑動的相對位置，這里依然是以原來的位置為0px，val2是完成向下滑動所需的時間。

然后我們在頁面加載完成的時候設置一個定時器，來執行我們定義的go函數：

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

這里的參數可以根據需要進行修改，這里我們讓定時器每3秒執行一次go函數。

源碼基本都貼出來了，有需要源文件的童鞋可以猛擊這里下載。