1

我在调整窗口大小时遇到​​了这个网站的问题：http: //goo.gl/BaIuy

让我试着解释一下。如您所见，我正在尝试实现在鱼缸中的体验。它由 4 个不同的容器制成，一个用于水背景，一个用于内容，另一个用于鱼图像，最后一个用于浮木和海藻等图形对象。

每个容器，除了一个用于水背景的容器，都有一个<ul id="mask">比窗口大小宽 600% 的主容器。这ul#mask包含六个<li>元素，它们对应于网站的每个部分，每个部分的宽度为窗口大小的 100%。

<ul id="mask">
    <li id="home" class="box"></li> 
    <li id="about" class="box"></li>    
    <li id="services" class="box"></li> 
    <li id="clients" class="box"></li>  
    <li id="give" class="box"></li>
    <li id="contact" class="box"></div></li>
</ul>

#mask {
    float: left;
    padding: 0;
    width: 600%;
}

#mask > li {
    float: left;
    list-style: none;
    width: 16.66666666%;
}

问题是，当您位于与第一个（第一个<li id="home">）不同的部分并调整窗口大小时，所有<li>元素开始减小其宽度但当前<li>不再填满窗口大小并且其他<li>元素开始出现在屏幕中由于调整大小操作。

我已经尝试通过使用javascript计算宽度来为元素提供调整大小的宽度，并停用样式表中元素的宽度，以便javascript在页面加载时为其提供窗口宽度。但似乎缺少某些东西或者我'我做错了，看看这里：

    $(function () {
    $('.header').fadeIn(1600);
    $('.mainWrapper ul#mask').fadeIn(4000);
    $('.secondLayer ul#mask').fadeIn(4000);
    $('.thirdLayer ul#mask').fadeIn(4000);

        $('ul#mask').css({width: '600%'});
        $('ul#mask li').css({width: '16.66666666%'});

        $(window).resize(function() {
            var viewPortSize = $(window).width();
            var maskSize = parseInt(viewPortSize)*6
            var maskLiSize = parseInt(maskSize)/6

            $('ul#mask').width(maskSize);
            $('ul#mask li').width(maskLiSize);
        });
    });

#mask {
    display: none;
    float: left;
    padding: 0;
    /* width: 600%; */
}

#mask > li {
    float: left;
    list-style: none;
    /* width: 16.66666666%; */
}

我希望有人可以帮助并感谢您抽出时间来看看这个。

4

2 回答 2

0

如果你想看看，我有一个类似的问题，我在这篇文章中解决了这个问题。

于 2013-05-07T19:27:57.657 回答
0

调整浏览器大小时更新滚动位置

调整浏览器大小时，容器的水平滚动位置不会更新。鉴于元素的宽度已经改变，并且页面可能通过@media查询切换到不同的布局，之前的水平滚动位置不再有效，需要更新。

调整大小后，每个容器都应立即滚动到正确的滚动位置，就好像用户重新单击了当前导航元素一样（除了滚动操作应以 0 毫秒的持续时间执行）。

我不确定仅此一项是否可以完全解决问题。在最坏的情况下，这是一个需要解决的单独问题。

于 2013-05-06T19:50:44.697 回答