脚本宝典收集整理的这篇文章主要介绍了js实例教程-分享一个JS处理大背景图的方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

 <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>  

 <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处理大背景图的方法：

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

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-分享一个JS处理大背景图的方法全部内容，希望文章能够帮你解决js实例教程-分享一个JS处理大背景图的方法所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。