大背景图片的处理（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最底部进行了函数封装，在下次调用时直接输入参数即可。