当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 分享一个JS处理大背景图的方法

分享一个JS处理大背景图的方法

2018年10月17日  | 移动技术网IT编程  | 我要评论

超级文明之主宰,云鼎彩票3878,慈溪职高黄瓜门

今天来跟大家分享一个js处理大背景图的方法：

（ps:这个方法是为了解决在不同分辨率的电脑上根据视口大小对大背景图片的处理！）

这是html部分：

<span style="font-size:12px;"><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>  
  
<p class="container">  
    <p class="banner"></p>  
    <p class="head"></p>  
</p></span>

下边是js部分：

<script>  
        //获取视口宽度  
        var viewportwidth = document.documentelement.clientwidth;  
        //设计图最大宽度  
        var designwidth = 1920;  
        //向左侧移动的距离  
        var offsetleft = (designwidth - viewportwidth)/2;  
        //通过queryselector()方法 来提取相应的图片p  
        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最底部进行了函数封装，在下次调用时直接输入参数即可。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网