我個人表示非常喜歡微軟新一代的產品，先不管它產品的成熟與否，但是它帶來的是全新的產品。所謂全新，是指在使用者體驗上，蘋果這些年的成功使得所有產品都在模仿它的介面，包括安卓在內，不知道大家的感覺如何，反正我是對這些圓角矩形產生了美學疲勞（蘋果以及安卓的粉絲勿噴，這裡僅僅是從界面上評價，事實上從整體上來說，微軟還是有差距的），當年wp的推出讓我眼前一亮，馬上喜歡上了Metro風格的產品，直至今天wp8以及win8開始越來越成熟。
寫的不好，歡迎各位看官指正批評，不歡迎無故猛噴。大神請繞道。
廢話少說，進入正題。 基本想法是：定義一個外層div，固定高度（例如本例中的180px）並設定屬性overflow:hidden（隱藏超出邊框的部分），然後在這個div裡面定義一個內層div，並設定屬性position:relative（採用相對佈局）。在這個內層div裡面，我們定義一張圖片，注意要設定它的高度跟外層div高度一樣（如本例中的180px），再定義一個div放文字，該div的高度也和外層div高度一樣（如本例中的180px，如果你給了一個padding，則高度相應減小，以達到整個div是180px的高度）。版面碼如下圖
html:
複製程式碼
複製程式碼
複製程式碼
複製程式碼
複製程式碼
複製碼:
複製代碼
代碼如下:
#outside{ height:180px; overflow:hidden;
}#text
{
width:160px;
height:160px;
background:#0000ffffff; 🎜>}
剩下來的就是JQuery的事了。首先先理解這個「動態磁貼」的動作：一開始顯示一張圖片，然後向上滑動顯示文字，停留一會，再向下滑動顯示圖片，如此循環。我們先定義一個函數：
複製程式碼
$(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","#inside", 1500, "180px","#inside", 1500, "180px".
}, 3000);
});
這裡的參數可以根據需要進行修改，這裡我們讓定時器每3秒執行一次go函數。
原始碼基本上都貼出來了，有需要原始檔的童鞋可以猛擊
這裡下載。
