1

编辑：在阅读我最初在下面写的内容之前，我想更清楚地说明这一点......我正在创建一个网站，使用三个部分相互浮动。我使用链接从一个部分滚动到另一个部分。滚动到该部分时，我希望该部分的背景适合浏览器屏幕大小。如果在仍然查看页面的该部分时浏览器被调整大小，我希望背景“捕捉”到窗口并继续填充屏幕。目前，这只发生在最左边的部分。

我不确定这是否可能，但我想我会看到的。我一直在研究本网站教程中的单页策略：http: //jqueryheaven.com/2012/08/building-a-one-page-portfolio-with-jquery-slide/

虽然本教程使用了许多不同的部分，但我只让我的网站使用 3 或 4 个。无论哪种方式，我都试图弄清楚如何让每个部分适应浏览器窗口，无论您调整窗口大小有多大或多小. 到目前为止，在教程和我制作的网站上，只有最左边的部分适合窗口。其余部分不会调整大小以适应。

这是我到目前为止的代码：

HTML（我省略了容器内的内容：

<div id="main">

<section id="artwork" class="box">
</section>


<section id="home" class="box">
</section>


<section id="contact" class="box">
</section>

</div>

CSS（尝试对部分使用 100% 的宽度和高度，以及 background-size:cover，但没有任何效果）：

.box {
float:left;
}

#artwork {
background: #b4c620;
width:100%;
height:100%;
background-size:cover;
}

#home {
background: #58267a;
with:100%;
height:100%;
background-size:cover;
}

#contact{
background: #b4c620;
width:100%;
height:100%;
background-size:cover;
}

脚本（也取自教程，正如我所提到的，它只调整第一个部分框的大小，（#artwork，）而不是其余部分。虽然，如果您在调整浏览器大小后链接到该部分，该部分会适合。）：

<script type="text/javascript">
function resizeBoxes() {

var browserWidth = $(window).width();
var browserHeight = $(window).height();

$('#main').css({
width: browserWidth*3,
});


$('.box').css({
width: browserWidth,
height: browserHeight,
});

}

resizeBoxes();

$(window).resize(function() {
resizeBoxes();
});


$('nav ul li a').click(function(){
return false;
});
</script>

<script type="text/javascript">
function goTo(horizontal,vertical) {

var browserWidth = $(window).width();
var browserHeight = $(window).height();

$('#main').animate({
    marginLeft: '-'+browserWidth*horizontal,
    marginTop: '-'+browserHeight*vertical,
}, 1000);

}
</script>

我希望你明白我想要完成什么。我是新手，所以如果我的编码一团糟，我很抱歉。如果您能帮助我找到解决方案，我将不胜感激！谢谢。

4

1 回答 1

1

我相信我明白你在问什么。我刚刚在我的网站michaelagarrison.com上完成了此操作（您可以在http://www.michaelagarrison.com/assets/js/main.js查看我的 JS 文件）。在我的网站上，它会更改每个section标签的高度以固定浏览器窗口的高度。您所要做的就是使用我的 jQuery 脚本的这个修改版本：

$(document).ready(function(){
  function resizeSection(tag) {
    var docHeight = $(window).height();  // Get the height of the browser window
    var docWidth = $(window).width();    // Get the width of the browser window
    // Now set the height / width to the browser height / width in css
    $(tag).css({'height': docHeight + 'px', 'width': docWidth + 'px', 'display': 'block'});
  }
  // Replace TagNameHERE with the correct tag you want resized
  $('TagNameHERE').each(function(){  
    resizeSection(this);  // Call the function and make sure to pass 'this'
  });
  // This will handle the resize
  $(window).resize(function() {
    $('TagNameHERE').each(function(){
      resizeSection(this);
    });
  });
});

奇怪的是 100% 的宽度/高度不起作用。在我的原始脚本中，我只是使用填充来获得正确的高度。请注意，您需要以下代码才能使我的脚本正常工作：

// Put this line in the head.  You can also use a local jQuery file if you wish
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

如果我理解正确，请告诉我。

于 2013-01-31T18:58:28.593 回答