摘要:今天来跟大家分享一个JS处理大背景图的方法:(PS:这个方法是为了解决在不同分辨率的电脑上根据视口大小对大背景图片的处理!)

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-分享一个JS处理大背景图的方法

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

今天来跟大家分享一个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最底部进行了函数封装,在下次调用时直接输入参数即可。

今天来跟大家分享一个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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过