使用Javascript - 圖像變化的大小調整，以全面的背景

作爲一個快速的解釋，我創建了重新調整使用此功能偉大的工程，填補了背景的圖像：使用Javascript - 圖像變化的大小調整，以全面的背景

function resize_bg(element_id){ 

    $("#"+element_id).css("left","0"); 
    var doc_width = $(window).width(); 
    var doc_height = $(window).height(); 
    var image_width = $("#"+element_id).width(); 
    var image_height = $("#"+element_id).height(); 
    var image_ratio = image_width/image_height;  
    var new_width = doc_width; 
    var new_height = Math.round(new_width/image_ratio); 
    if(new_height<doc_height){ 
     new_height = doc_height; 
     new_width = Math.round(new_height*image_ratio); 
     var width_offset = Math.round((new_width-doc_width)/2); 
     $("#"+element_id).css("left","-"+width_offset+"px"); 
    } 
    $("#"+element_id).width(new_width); 
    $("#"+element_id).height(new_height); 

    return true; 
}

所以對於全背景圖像沒有問題。當我使用Javascript更改圖像源時，問題就出現了。換句話說，我將1個圖像設置爲背景，但將某些元素懸停在頁面上時，圖像會更改，但不會更改右側的調整大小。因此，加載的第一個圖像被調整大小並正確定位，但是當我使用.attr（'src'，newimg）切換圖像時，即使再次調用該函數，圖像也沒有正確調整大小。

下面是我用它來改變形象，並調整它的代碼：

$('#menu_work li a').hover(function(){ 
    $('#content').hide(); 
    var img_src = $(this).next('img').attr('src'); 
    $('#full_screen_img').attr('src', img_src); 
    resize_bg(); 
    $('#full_screen_img').show(); 
},function(){ 
    $('#full_screen_img').hide(); 
    $('#content').show(); 
});

感謝您的幫助。

來源

2012-02-18 denislexic

你可以在代碼中調用'resize_bg'函數嗎？加載和元素懸停。 – satoshi 2012-02-18 17:45:25

@micha - 是的，請查看問題中添加的代碼。 – denislexic 2012-02-18 17:50:21

您是否確認過'img_src'的值是您期望的值？ – satoshi 2012-02-18 17:53:31

@maxedison是正確的，你忘了傳遞元素ID。

另一個問題是，當您更改src時，新圖像可能尚未加載，因此您將無法在resize_bg中獲得正確的尺寸，直到它出現爲止。

在這種情況下，你需要調整圖像大小，一旦它的加載：

$('#full_screen_img').attr('src', img_src).load(function() { 
    resize_bg('<ELEMENT_ID>'); 
}); 
resize_bg('<ELEMENT_ID>');

在另一方面，我建議你改變resize_bg獲得的，而不是一個id一個jQuery對象，或者甚至寫一個插件（$.fn.resize_bg），如果它是你想要經常使用的功能。

來源

2012-02-18 18:03:26 ori

@ maxedison是對的，你擴展到預測出現的問題，謝謝。 – denislexic 2012-02-19 06:57:21

這是什麼意思？「改變resize_bg得到一個jQuery對象而不是一個id，甚至編寫一個插件（$ .fn.resize_bg）」 – 2012-04-15 23:41:44

當前函數需要一個元素id，這是一個相當嚴格的要求。爲什麼不把它與jQuery對齊？重寫它以接受一個jQuery對象，並遍歷它的元素，或者通過將其更改爲jQuery插件'$ .fn.resize_bg = function（）{...}'來進一步。然後你可以通過$（'...'）調用它。resize_bg（）'（該對象通過'this'傳遞） – ori 2012-04-16 10:48:31

在hover事件處理程序中調用resize_bg()時，您似乎已經忽略了element_id參數。因此，resize_bg()找不到要調整大小的元素。

來源

2012-02-18 17:52:11 maxedison

使用Javascript - 圖像變化的大小調整，以全面的背景

回答

相關問題