-1

我有这个代码：

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

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

谢谢

4

1 回答 1

1

在窗口对象上使用调整大小事件

$(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 回答