jquery - 用于 DIV 上可缩放背景图像的 jQuery 插件

Question

我尝试研究但无法想出一个好的 jQuery 插件，它允许我在可扩展的同时将背景图像插入到 div 中。例如，

假设我有 4 个不同的 div，如下所示：

<div id="one">

</div>

<div id="two">

</div>

<div id="three">

</div>

<div id="four">

</div>

每个 #/id/div 都必须有自己独特的图像，并且必须调整大小或可缩放到浏览器的宽度和高度。我希望它与 IE7+ 兼容。如果 Stack Overflow 社区可以提供帮助，那就太好了。

我知道我可以在 div 上使用 background-resize:100% 但只能在现代浏览器上使用。

Answer 1

我拼凑的东西让你开始。在创建或添加两个额外的宽度和高度参数之前设置 div 的大小。

(function( $ ) {
  $.fn.bgImage = function( src ) {
    var d=this;
    var ht=d.html();
    var z=parseInt(d.css('z-index'));
    if(!z) z=0;  
    var oImg=document.createElement('img'); 
    oImg.src=src;
    oImg.style.width=d.width()+'px';
    oImg.style.height=d.height()+'px';
    oImg.style.position='absolute';
    oImg.style.zIndex=z;
    d.html('');
    d.append('<div id="a" style="position:absolute;z-index:'+(z+1)+';">'+ht+'</div>');
    d.append(oImg);
  };
})( jQuery );

$('#one').bgImage('http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif');