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

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

今天来跟大家分享一个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处理大背景图的方法

http://www.js-code.com/js/js_1109.html

80%的人都看过