首頁  >  文章  >  web前端  >  透過JQuery實現win8一樣酷炫的動態磁貼效果(範例程式碼)_jquery

透過JQuery實現win8一樣酷炫的動態磁貼效果(範例程式碼)_jquery

WBOY
WBOY原創
2016-05-16 17:29:001376瀏覽

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

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

廢話少說,進入正題。 基本想法是:定義一個外層div,固定高度(例如本例中的180px)並設定屬性overflow:hidden(隱藏超出邊框的部分),然後在這個div裡面定義一個內層div,並設定屬性position:relative(採用相對佈局)。在這個內層div裡面,我們定義一張圖片,注意要設定它的高度跟外層div高度一樣(如本例中的180px),再定義一個div放文字,該div的高度也和外層div高度一樣(如本例中的180px,如果你給了一個padding,則高度相應減小,以達到整個div是180px的高度)。版面碼如下圖
html:

複製程式碼



複製程式碼



複製程式碼



複製程式碼

複製程式碼
複製程式碼複製程式碼
複製碼:



   

        透過JQuery實現win8一樣酷炫的動態磁貼效果(範例程式碼)_jquery
       

           
           

我個人表示非常喜歡微軟新一代的產品…


       
        
 >


css:





複製代碼

代碼如下: #outside{    height:180px;    overflow:hidden;
}#text
{
    width:160px;
    height:160px;
    background:#0000ffffff; 🎜>}


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

複製程式碼

程式碼如下:function go(id , 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","#inside", 1500, "180px","#inside", 1500, "180px".
    }, 3000);
});

這裡的參數可以根據需要進行修改,這裡我們讓定時器每3秒執行一次go函數。
原始碼基本上都貼出來了,有需要原始檔的童鞋可以猛擊這裡下載
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn