程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 更多關於編程 >> 通過JQuery實現win8一樣酷炫的動態磁貼效果

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

編輯:更多關於編程
    相信大家喜歡這個界面無非也是喜歡它的動態磁貼。剛好今天研究了一下如何通過JQuery在網頁上模仿這種效果,就貼出來給大家噴一下。雖然是一些很低級的技術,但是也希望有需要的朋友可以參考下  

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

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

    廢話少說,進入正題。基本思想是:定 義一個外層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://xxxxxxxxx圖片地址" />
            <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函數。
    源碼基本都貼出來了,有需要源文件的童鞋可以猛擊這裡下載

    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved