用窗口调整大小函数附加回调的最佳方法

我试图创建jQuery循环幻灯片，其中不同大小的图像垂直和水平居中，并且还重新调整窗口大小。其中一些是直接的CSS，但我需要动态调整每个图像上的“顶部”，“左侧”，“边缘顶部”和“边缘左侧”，然后在幻灯片的第一幅图像中淡出。用窗口调整大小函数附加回调的最佳方法

因此，我认为需要创建一个回调，其中尺寸和边距在图像出现之前设置。无法弄清楚这样做的最佳方式。

CSS很简单。本质：

#gallery img { 
max-height: 100%; 
position:absolute; 
display:none; 
}

而且.js文件的粗剪将是：

$(window).bind("load resize", function() { 
     $('#gallery img').each(function(i) { 
     var ih = $(this).height(); 
     var iw = $(this).width(); 
     var fh = Math.ceil(ih/2); 
     var fw = Math.ceil(iw/2); 
     $(this).css({ 
      'top' : '50%', 
      'left' : '50%', 
      'margin-top' : '-' + fh + 'px', 
      'margin-left' : '-' + fw + 'px' 
     }); 
     },function() { 
     $('#gallery img:first').fadeIn(3000, function() { 
     $('#gallery').cycle(); 
    });

但是我没有看到预期的结果。在计算和定位发生之前，第一个img的淡入触发。

以为“显示：没有”可能会混淆的东西（也许没有被计算，直到它的

#gallery img:first-child { 
    display:block; 
    opacity:0; 
    }

..和动画，然后到完全不透明的，而不是：“显示：块”，我已经尝试使用在淡入 - 但结果是一样的

我在做什么错？

来源

2011-11-06 SWW

您正在使用的每种方法都没有回调函数。请参阅http://api.jquery.com/each/ 那个是http://api.jquery.com/jQuery.each/ 这可能有所帮助。 – awatts

“margin：auto;”与你想要完成的不同？ – buster

感谢您的信息。我仍然有语法问题，因为我也试图绑定窗口加载和调整大小，但是，假设我会偶然发现它。（jQuery.each的文档看起来很苗条..）（'margin：auto'不能在绝对定位的元素上工作） – SWW

我并不完全相信你的代码试图做的，但我敢打赌这个问题可能是更多的。事件和循环逻辑您的代码如同w试图在重新调整大小后重新显示第一张图片，不确定是否在此处误解了您的意图。

也许像这样分开调整大小和图库循环逻辑可能有助于保持代码更清晰;这将重新调整大小的图像大小，并启动加载库：

$(document).ready(function() { 

function resizeThem() { 
    $('#gallery img').each(function(i) { 
     var ih = $(this).height(); 
     var iw = $(this).width(); 
     var fh = Math.ceil(ih/2); 
     var fw = Math.ceil(iw/2); 
     $(this).css({ 
      'top' : '50%', 
      'left' : '50%', 
      'margin-top' : '-' + fh + 'px', 
      'margin-left' : '-' + fw + 'px' 
     }); 
     }); 
} 

$(window).bind("resize", resizeThem); 

$(document).bind("load", function() { 
    resizeThem(); 
     $('#gallery img:first').fadeIn(3000, function() { 
     $('#gallery').cycle(); 
     }); 
});

}）;

请注意，resize事件在不同浏览器之间的行为表现如何。另外，它似乎很容易调整所有图像。如何调整显示屏上的图像大小，然后依次调整图像大小，然后根据浏览器大小显示图像。

来源

2011-12-04 15:09:21 kontur

感谢kontur - 我想要做的是：在循环幻灯片开始之前加载图像并将它们水平和垂直居中。这会影响图像的大小。调整大小本身只与CSS完成，但我希望中心动态跟随。 – SWW

用窗口调整大小函数附加回调的最佳方法

回答

相关问题