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

下面是“js实现背景图自适应窗口大小”的完整攻略：

1. 确定背景图的样式

在实现背景图自适应窗口大小的过程中，我们需要先给背景图指定一些样式。最常用的方法是将背景图作为页面的一部分，利用CSS中的background属性进行样式设置。

body {
  background: url("bg.jpg") no-repeat center center fixed;
  background-size: cover;
}

上述代码中，我们将背景图的地址设置为bg.jpg，并将该图片居中重复，使其填满整个页面。由于我们希望背景图能够自适应窗口大小，因此使用background-size: cover，可以保证不论窗口大小如何，背景图都能够完全覆盖背景。

2. 编写JavaScript代码

在确定了背景图样式后，我们需要编写JavaScript代码，以便在浏览器窗口大小变化时可以动态调整背景图大小。最常用的方法是使用window.onresize事件监听器，该事件可以在窗口大小改变时触发。

下面是示例代码：

function resizeBackground() {
  var w = window.innerWidth;
  var h = window.innerHeight;
  document.body.style.backgroundSize = w + "px " + h + "px";
}

window.onresize = resizeBackground;

在上述代码中，我们定义了一个resizeBackground函数，该函数结合了window.innerWidth和window.innerHeight属性分别获取了浏览器当前的窗口宽度和高度。然后，我们将获取到的w和h值，作为背景图大小设置给document.body.style.backgroundSize属性。最后，我们通过将window.onresize事件绑定到resizeBackground函数上，可以在窗口大小调整时动态更新背景图大小。

另一种实现方式是利用CSS的vw和vh属性，这是一种相对于视口宽度（viewport width）和视口高度（viewport height）进行设置的单位，可以自适应不同的浏览器窗口大小，无论是宽窄、高矮都不存在问题。示例代码如下：

body {
  background: url("bg.jpg") no-repeat center center fixed;
  background-size: 100vw 100vh;
}

3. 示例说明

下面是两个使用上述技术实现的示例。

示例一：jQuery背景自适应插件

该示例将演示如何使用jQuery的背景自适应插件实现背景图自适应窗口大小。 在页面中引入jquery.js和jquery.backstretch.js两个文件，然后按照以下方式初始化：

<script>
  $.backstretch("bg.jpg");
</script>

示例二：原生JavaScript实现自适应背景

该示例将演示如何使用原生JavaScript实现自适应背景。在HTML文件中，需要添加以下代码：

<script src="app.js"></script>

app.js文件内容如下：

function resizeBackground() {
  var w = window.innerWidth;
  var h = window.innerHeight;
  document.body.style.backgroundSize = w + "px " + h + "px";
}

window.addEventListener("resize", resizeBackground);
resizeBackground();

通过上述过程，我们可以实现背景图自适应窗口大小，无论浏览器窗口大小如何变化，都可以保证背景图完全覆盖整个页面。