JavaScript实现背景图片自适应窗口大小

作者:纸飞机时间:2026-10-21 20:02:18浏览:309

本文提供一段JavaScript代码,通过监听窗口resize和load事件,动态获取窗口宽度并调整背景图片的宽度。当窗口宽度大于1650时,图片宽度随之变化;否则固定为1650,实现背景图的自适应效果。

JavaScript实现背景图片自适应窗口大小

话不多说,请看代码


<script type="text/javascript">
 window.onresize = window.onload = function()
 {
  var w,bgImg;
  if(!!(window.attachEvent && !window.opera)) {
   w = document.documentElement.clientWidth;
  } else {
   w = window.innerWidth;
  }if(w>1650){
   document.getElementById ('msg').value ='窗口大小:' + 'width:' + w;
   bgImg = document.getElementById('bg').getElementsByTagName('img')[0];
   bgImg.width = (w - 5);
  }else{
  document.getElementById ('msg').value ='窗口大小:' + 'width:' + w;
  bgImg = document.getElementById('bg').getElementsByTagName('img')[0];
  bgImg.width = 1650;
 }
 }
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持本站!

作者最新文章