使用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 - 图像变化的大小调整，以全面的背景

回答

相关问题