-1

私はこのコードを持っています:

function viewport() {
var height = $(window).height();
viewport = parseInt(height) + 'px';
$(".page").css('height',viewport);
$(".dot_page").css('height',viewport);
}

ビューポートの高さに応じて div のサイズを変更するだけです。これはページの読み込み中に 1 回発生しますが、ページをリロードせずにビューポートのサイズが変更された場合 (誰かがマウスでブラウザーのサイズを変更しただけ)、動的に更新したいと考えています。

ありがとうございました

4

1 に答える 1

1

window オブジェクトでresizeイベントを使用する

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

次の理由から、関数も変更する必要があります。

viewport = parseInt(height) + 'px';

ビューポート変数を再割り当てします。これは、最初は関数でした

var heightString = parseInt(height) + 'px';

これらの両方を使用すると、問題が解決するはずです。

resizeイベントの割り当ては$(document).ready通話中に行う必要があります。

すべてのコードで、これは次のようになります。

<script>
function viewport() {
  var height = $(window).height();
  var viewportHeight = parseInt(height) + 'px';
  $(".page").css('height',viewportHeight);
  $(".dot_page").css('height',viewportHeight);
}

$(document).ready(function() {
  viewport();
  $(window).bind('resize', viewport);

  $(".scroll").click(function(event){
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1250);
  });

  $(".circle_col > a > img").hover(
  function() {
    $(this).stop().animate({"opacity": "0"}, 200);
    },
  function() {
    $(this).stop().animate({"opacity": "1"}, 200);
  });
});
</script>
于 2012-11-22T01:54:09.827 に答える