0

我正在尝试从头开始重建我的个人作品集网站，主要用于 jQuery 练习，而我才刚刚开始，但遇到了 2 个问题。

首先，这是我到目前为止的预览链接：http ://www.forrestmckinney.com/portfolio-preview/

基本上我的想法是拥有带有 div 的大背景图像，在每次其他导航点击时滚动到视图中。随着 div 滚动，背景图像发生变化。但是，我还希望通过我遇到问题的 break_size 函数动态调整 div 的大小。该函数非常适合设置每个 div 的大小，即使在调整大小时也是如此，但由于某种原因，间距是关闭的。第一个显示得很好，然后每一个都太高了：

function break_size() {
    var windowY = $(window).height();   
    var breakHeight =(94 * windowY) / 100;

    var marginY = ((windowY - breakHeight)/2);

    $('.break').css('height', breakHeight);
    $('.break').css('margin-top', marginY + windowY);
    $('.break').css('margin-bottom', marginY);
}

因此，除非我遗漏了什么，否则这段代码应该将每个 .break div 的高度设置为窗口高度的 94%，将 marginY 变量设置为（窗口高度 - 中断高度）/2（一半用于顶部，一半用于为底部），然后将下边距设置为 marginY，将上边距设置为 marginY 加上窗口的高度（有效地将每个 div 间隔一个窗口高度，允许完整的背景图像显示在 div 之间）。

我遇到的另一个问题是图像之间的闪烁。我添加了 e.preventDefaults()，但没有运气。

有谁知道那里发生了什么？提前致谢！

4

1 回答 1

0

var image_url = 'url(images/image1.jpg';

第 15 行的错字，缺少括号。

您的数学是准确的，但是某些内容不适用于 css。元素没有正确定位。看起来每个元素的下边距都没有影响它下面的边距。我不知道为什么会这样，但我找到了一种解决方法，将底部边距添加到其他元素的顶部：

$('.break').css('height', breakHeight);
//remove bottom margin, use extra top margin instead
$('.break').css('margin-top', marginY + marginY + windowY); 
//normal margin for first child
$('.break:first-child').css('margin-top', marginY + windowY);

从理论上讲，这可以在您的设置中使用，但我没有对其进行测试。

至于闪烁，我也可能是错的，所以让我知道，但看起来你在按下按钮时正在更改背景图像。单独更改背景图像会导致这种情况，但每次单击按钮时也不需要更改它。相反，您应该堆叠图像并更改堆叠图像的可见性，这样它们就会被预加载。然后，仅在需要时交换图像。

于 2013-04-04T19:39:59.683 回答