通過JQuery實現(xiàn)win8一樣酷炫的動態(tài)磁貼效果(示例代碼)
我個人表示非常喜歡微軟新一代的產(chǎn)品，先不管它產(chǎn)品的成熟與否，但是它帶來的是全新的產(chǎn)品。所謂全新，是指在用戶體驗上，蘋果這些年的成功使得所有產(chǎn)品都在模仿它的界面，包括安卓在內(nèi)，不知道大家的感覺如何，反正我是對這些圓角矩形產(chǎn)生了審美疲勞（蘋果以及安卓的粉絲勿噴，這里僅僅是從界面上評價，事實上從整體上來說，微軟還是有差距的），當年wp的推出讓我眼前一亮，馬上喜歡上了Metro風格的產(chǎn)品，直至今天wp8以及win8開始越來越成熟。
寫的不好，歡迎各位看官指正批評，不歡迎無故猛噴。大神請繞道。
廢話少說，進入正題。基本思想是：定義一個外層div，固定高度（例如本例中的180px）并設(shè)置屬性overflow:hidden（隱藏超出邊框的部分），然后在這個div里面定義一個內(nèi)層div，并設(shè)置屬性position:relative（采用相對布局）。在這個內(nèi)層div里面，我們定義一張圖片，注意要設(shè)置它的高度跟外層div高度一樣（如本例中的180px），再定義一個div放文字，該div的高度也和外層div高度一樣（如本例中的180px，如果你給了一個padding，則高度相應(yīng)減小，以達到整個div是180px的高度）。布局代碼如下所示
html:
<div id="outside">
<div id="inside">
<img width="180px" height="180px" src="http://xxxxxxxxx圖片地址" />
<div id="text">
<span>通過JQuery實現(xiàn)win8一樣酷炫的動態(tài)磁貼效果</span>
<p>林宇</p>
<p>我個人表示非常喜歡微軟新一代的產(chǎn)品……</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的事情了。首先先理解一下這個“動態(tài)磁貼”的動作：一開始顯示一張圖片，然后向上滑動顯示文字，停留一會，再向下滑動顯示圖片，如此循環(huán)。我們先定義一個函數(shù)：
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個參數(shù)，id是內(nèi)層div也就是要滑動的div的id，d1是內(nèi)層div滑上去以后停留的時間，px1是內(nèi)層div要向上滑動的相對位置，默認當前位置為0px，val1是內(nèi)層div的完成向上滑動動作所需要的時間，d2是向下滑動div后停留的時間，px2是向下滑動的相對位置，這里依然是以原來的位置為0px，val2是完成向下滑動所需的時間。
然后我們在頁面加載完成的時候設(shè)置一個定時器，來執(zhí)行我們定義的go函數(shù)：
$(function () {
timer1 = setInterval(function () {
go("#inside", 1500, "180px", 1200, 1000, "0px", 2000);
}, 3000);
});
這里的參數(shù)可以根據(jù)需要進行修改，這里我們讓定時器每3秒執(zhí)行一次go函數(shù)。
源碼基本都貼出來了，有需要源文件的童鞋可以猛擊這里下載。
相關(guān)文章
這篇文章主要介紹了jquery實現(xiàn)的分頁顯示功能,涉及jQuery的ajax交互及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-08-08
好的代碼會帶來速度的提升，快速渲染和響應(yīng)意味著更好的用戶體驗。本文主要總結(jié)了如何高效的編寫jQuery代碼的技巧，對提升你的jQuery和javascript代碼具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jQuery事件綁定與解除綁定實現(xiàn)方法,實例分析了jQuery中bind與unbind方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了jQuery中width()方法用法,以實例形式較為詳細的分析了width()方法獲取元素寬度的技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery Timelinr實現(xiàn)垂直水平時間軸插件(附源碼下載)
jquery.timelinr.js是一款效果非常炫酷的jQuery時間軸插件。下面腳本之家小編給大家介紹jQuery Timelinr實現(xiàn)垂直水平時間軸插件，需要的朋友參考下2016-02-02
這篇文章主要給大家介紹了利用jquery實現(xiàn)去掉時光軸頭尾部線條的方法，文中給出了詳細的實例代碼供大家參考學習，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
js整數(shù)字符串轉(zhuǎn)換為金額類型數(shù)據(jù)(示例代碼)
本篇文章主要是對js整數(shù)字符串轉(zhuǎn)換為金額類型數(shù)據(jù)的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
本篇文章主要介紹了ayui彈窗父子窗口之間傳參數(shù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細介紹了jquery制做精致的倒計時特效的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
jQuery Validation Engine驗證控件調(diào)用外部函數(shù)驗證的方法
這篇文章主要介紹了jQuery Validation Engine驗證控件調(diào)用外部函數(shù)驗證的方法，需要的的朋友參考下吧2017-01-01