1

ウィンドウのサイズを変更するときに、この Web サイトに問題があります: http://goo.gl/BaIuy

説明してみましょう。ご覧のとおり、金魚鉢にいるような体験を実現しようとしています。水の背景用、コンテンツ用、魚の画像用、流木や海藻などのグラフィック オブジェクト用の 4 つの異なるコンテナーで作成されます。

水の背景用のものを除く各コンテナーには<ul id="mask">、ウィンドウ サイズより 600% 広いメインがあります。これには、Web サイトの各セクションに対応するul#mask6 つ<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