大背景圖片的處理（JS）

今天來跟大家分享一個JS處理大背景圖的方法：

（PS:這個方法是爲了解決在不同分辨率的電腦上根據視口大小對大背景圖片的處理！）

這是HTML部分：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body,.container{
        width: 100%;
    }
    .banner{
        height: 40px;
        width: 100%;
        background: url("img/bg_banner.png") no-repeat;
    }
    .head{
        height: 400px;
        width: 100%;
        background: url("img/bg_head.png") no-repeat;
    }
</style>

<div class="container">
    <div class="banner"></div>
    <div class="head"></div>
</div>

下邊是JS部分：

<script>
        //獲取視口寬度
        var viewportWidth = document.documentElement.clientWidth;
        //設計圖最大寬度
        var designWidth = 1920;
        //向左側移動的距離
        var offsetLeft = (designWidth - viewportWidth)/2;
        //通過querySelector()方法 來提取相應的圖片div
        var head_img = document.querySelector(".head");
        var banner = document.querySelector(".banner");
        //設置圖片的偏移量
        head_img.style.backgroundPositionX=-offsetLeft + "px";
        banner.style.backgroundPositionX=-offsetLeft + "px";

        //window.onresize() 是當視口調整時執行的方法
        window.onresize = function(){
            var viewportWidth = document.documentElement.clientWidth;
            MoveTo(viewportWidth,1920,head_img,500);
            MoveTo(viewportWidth,1920,banner,500);

        }

        //封裝函數MoveTo
        function MoveTo(viewportWidth,designWidth,head_img,minWidth){

            if(viewportWidth<minWidth){
                return;
            }
            var offsetLeft = (designWidth - viewportWidth)/2;
            head_img.style.backgroundPositionX=-offsetLeft + "px";
        }
    </script>

在JS最底部進行了函數封裝，在下次調用時直接輸入參數即可。