用窗口調整大小函數附加回調的最佳方法

我試圖創建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

用窗口調整大小函數附加回調的最佳方法

回答

相關問題