1

編集: 以下に最初に書いたものを読む前に、これを明確にしたかったのです...私は、互いに左に浮かぶ3つのセクションを使用してWebサイトを作成しています。リンクを使用して、あるセクションから別のセクションにスクロールします。そのセクションにスクロールするとき、そのセクションの背景をブラウザの画面サイズに合わせたいです。ページのそのセクションをまだ表示しているときにブラウザーのサイズが変更された場合、背景をウィンドウに「スナップ」して画面を塗りつぶし続けます。現時点では、これは完全に左側にあるセクションでのみ発生します。

これが可能かどうかはわかりませんが、見てみようと思いました。私は、この Web サイトのチュートリアルで 1 ページ戦略に取り組んできました: http://jqueryheaven.com/2012/08/building-a-one-page-portfolio-with-jquery-slide/

このチュートリアルではさまざまなセクションを使用していますが、私は自分の Web サイトで 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でこれを終えたところです（私のJSファイルはhttp://www.michaelagarrison.com/assets/js/main.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 に答える