這是本人開發過程中，登入頁的一個簡單例子，主要實現圖片輪換和背景圖自適應，過程分享如下。

#登入框的居中問題

我們把登入頁面分成背景和登入面板兩個部分

<div id="background"><img
        src="background1.jpg"/>
</div>
<div class="loginForm">
    <%--此處省略登入框內容程式碼--%>
</div>

瀏覽器視窗會改變，登入面板大小不變。

使用絕對定位來佈局

        .loginForm {
            top: 50%;
            left: 50%;
            margin-top: -230px;
            margin-right: -200px;
            position: absolute;
        }

        #background {
            position: absolute;
            z-index: -1;
        }
 

讓登入框距離頂部50%，距離左側50%，“margin-top: -230px;”表示登入面板上移自身高度的一半，以達到居中效果。使用“z-index: -1;”使輸入面板覆蓋在背景div的層上。
#背景圖片的自適應
使背景圖不拉伸
為了解決背景圖片在解析度不同的情況下會變形的問題，引入瞭如下外掛:

jqthumb.js

其詳細引數好介紹見：jqthumb.js縮圖外掛-讓縮圖正常顯示而不變形

引入該元件後，我們編寫一個簡單的函式

    /**
     * 背景圖片的不拉伸自適應
     */
    function autoSizeBacgroundImage() {
        $('#background img').jqthumb({
            width: window.innerWidth,
            height: window.innerHeight,
            after: function (imgObj) {
                imgObj.css('opacity', 0).animate({opacity: 1}, 2000);
            }
        });
    }
 

視窗改變時，改變背景圖片大小，以適應視窗
我們使用如下函式來使得圖片大小能夠隨著視窗的改變而改變

/*當視窗改變時呼叫自適應函式*/
    $(function () {
        $(window).resize();
    });
    $(window).resize(function () {
        autoSizeBacgroundImage()
    });

#圖片輪換
獲取隨機圖片
為了達到背景圖片隨機切換的效果，使用了隨機函式來生成一個隨機整數以獲取隨機圖片。

      // 從任意值開始 至 任意值
      //parseInt(Math.random()*(上限-下限+1)+下限);
      var imageNumber = parseInt(Math.random() * (imageMax - imageMin + 1) + imageMin);
 

上述程式碼主要用於生成一個隨機數，我們可以對多張背景圖進行排序並編號，結合獲取到的隨機數即可達到獲取隨機圖片地址的效果。

我們將獲取到的地址，顯示到頁面上，並呼叫圖片自適應函式重新整理背景圖片。

        $('#background img').attr("src", url);
        autoSizeBacgroundImage()

圖片輪換，顯示隨機圖片
我們使用了Jquery的定時迴圈執行器setInterval()來達到定時更換背景圖的效果。

 //圖片輪換
    setInterval(function () {
        //隨機取一張圖片
        var imageMax = 4;
        var imageMin = 1;
        // 從任意值開始 至 任意值
        //parseInt(Math.random()*(上限-下限+1)+下限);
        var imageNumber = parseInt(Math.random() * (imageMax - imageMin + 1) + imageMin);
        var oldUrl = $('#background img').attr("src");
        var newUrl = ctx + "/background" + imageNumber + ".jpg";
        //擷取舊地址的前半部分，加上隨機地址的後半部分，得到一個新地址
        var url = oldUrl.split("background")[0] + "background" + newUrl.split("background")[1];
        $('#background img').attr("src", url);
        autoSizeBacgroundImage()
    }, 5000);

這裡我們每5000毫秒，換一次背景圖。

（全文完）

歡迎光臨：松果前端開發導航