0

ブラウザーのサイズ変更でラッパーとマスクのサイズを変更する方法についてのアイデアはありますか? 現在、マスクが読み込まれるとマスクが停止するため、基本的にコンテンツをスクロールすると切断されます。例については、こちらを参照してください。

$(document).ready(function() {

    $('a').click(function () {

        $('a').removeClass('selected');
        $(this).addClass('selected');

        current = $(this);

        $('#wrapper').scrollTo($(this).attr('href'), 800);      

        return false;
    });

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

});

function resizePanel() {

    width = $(window).width();
    height = $(window).height();

    mask_width = width * $('.item').length;

    $('#debug').html(width  + ' ' + height + ' ' + mask_width);

    $('#wrapper, .item').css({width: width, height: height});
    $('#mask').css({width: mask_width, height: height});
    $('#wrapper').scrollTo($('a.selected').attr('href'), 0);

}
4

3 に答える 3

1

これには実際には JavaScript は必要ありません。#wrapper、#mask、#item1 を次のように設定するメディア クエリを (モバイル スタイルに切り替えたときに) 入れます。

height: auto !important;
于 2013-06-28T01:36:35.157 に答える
0

id='mask'何らかの理由で、ページの読み込み時に Firebug にカーソルを合わせると、色が表示されません。id='item1'ページが読み込まれると、Firebug で色が変わるだけです。ブラウザー ウィンドウのサイズを変更すると、マスクに色が表示され、その CSS に取り消し線が引かれます。さらに、Firebug にはコンソール エラーがたくさんあります。私たちはお手伝いしたいと思っていますが、あなたのためにウェブサイト全体を構築するつもりはありません. 最初に Firebug を使用してコードをデバッグしてから、ご連絡ください。ありがとう。

于 2013-06-28T01:56:40.473 に答える
0

まず第一に、css にマスクを固定オブジェクトとして処理させるだけで、マスクに関する多くの頭痛の種から解放されます。これを行うと、サイズ変更関数から多くのコードを引き出すことができ、処理がかなり速くなります。

#mask{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:url(semi-transparent.png);
}

ラッパーアイテムと同じです。幅を %100 に設定するだけで、css に面倒な作業を任せることができます...

.item {
  width:100%;
}

だから今、あなたのサイズ変更機能は...

$(window).resize(function () {
  $('#wrapper').css({width: $(window).width(), height: $(window).height()})
    .scrollTo($('a.selected').attr('href'), 0);
});

ラッパー自体に関しては、何が問題なのか完全にはわかりません。デモまたは jsfiddle を投稿できる場合は、回答を更新します。

于 2013-06-28T01:39:59.863 に答える