Question

我有这段代码：

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

它只是根据视口高度调整div的大小。这在页面加载期间发生一次，但我希望在不重新加载页面的情况下调整视口大小（有人只是用鼠标调整浏览器大小），动态更新。

谢谢

Answer 1

在窗口对象上使用resize事件

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

您还应该更改您的功能，因为：

viewport = parseInt(height) + 'px';

重新分配viewport变量，该变量最初是

的函数

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>

使jQuery功能即时更新

1 个答案: