0

我正在根据用户的屏幕尺寸在加载时调整一些叠加图像的大小。但问题是每次加载时它都不起作用。如果我刷新太多次，它会工作一次。不知道问题出在哪里，因为也没有错误。我也签入了 chrome 和 firefox 开发人员工具。这是我的代码，任何人都可以建议这里有什么问题。

(function($){ 
$(window).load(function() {
var Height=$(window).height(); // New height
var Width=$(window).width(); // New width
$('.content-container').css('background-size', Width + 'px' + ' ' + Height + 'px');
$('.weare_map').height(Height*.54);
$('.invent_div').height(Height*.4);
var top2= ($(window).scrollTop());
$('.invent_div img').css('top',top2*.4);
$('.weare_map.map1').css('top',top2*.3);
$('.weare_map.pixels').css('top',top2*.2);
$('.weare_map.wearefaces').css('top',top2*.05);
  $('.content').css('height',Height + 'px');

});

$(window).resize(function() {
  // This will execute whenever the window is resized

var Height=$(window).height(); // New height
var Width=$(window).width(); // New width
$('.content-container').css('background-size', Width + 'px' + ' ' + Height + 'px');
var overlayw=$('.content-container').width();
var overlayh=$('.content-container').height();
$('.weare_map').height(Height*.54);
$('.invent_div').height(Height*.4);
var top2= ($(window).scrollTop());
$('.invent_div img').css('top',top2*.4);
$('.weare_map.map1').css('top',top2*.3);
$('.weare_map.pixels').css('top',top2*.2);
$('.weare_map.wearefaces').css('top',top2*.05);
$('.overlay').css('background-size', overlayw + 'px' + ' ' + Height + 'px');
$('.content').css('height',Height + 'px');

});

        })(jQuery);
4

1 回答 1

2

我可以看到您正在尝试使用滚动条位置来实现视差效果（对话证实了这一点），但您没有对其更改做出反应（即，scrollTop页面加载时几乎总是 0）。你也应该听听这些scroll事件。尝试：

$(window).on("load resize scroll", function(){
  var height=$(window).height(); // New height
  var width=$(window).width(); // New width
  ...

});

交替：

function recalculatePositions(){
  var Height=$(window).height(); // New height
  var Width=$(window).width(); // New width
  ...

}

$(window).on("load resize scroll", recalculatePositions);
  // $(window).load(function) has been deprecated
于 2012-12-23T08:58:28.717 回答