JQuery - 可缩放/调整背景图像大小

Question

我们的愿望是拥有一个可以随浏览器窗口调整大小/缩放/拉伸(stretch)的背景。

尽管似乎有一种 CSS3 方法，但它并未得到广泛支持。似乎有很多 JQuery 方法 - 但它们都有点......嗯，看起来有点笨拙或需要太多手动输入。

所以......我在想......一些能够掌握基础知识并为我们完成大部分工作的东西怎么样？

以下是我到目前为止所得到的:

它基于一些现有的方法，例如 Fullscreenr ，进行一些修改。

<script type="text/javascript">
//<![CDATA[
$.fn.fullscreenr = function(options) {
  var defaults = { width: 1280,  height: 1024, bgID: 'bgimg' };
  var options = $.extend({}, defaults, options); 

  $(document).ready(function() { 
    $(options.bgID).fullscreenrResizer(options);
  });

  $(window).bind("resize", function() {
    $(options.bgID).fullscreenrResizer(options);
  });

  return this;      
};  

$.fn.fullscreenrResizer = function(options) {
  // Set bg size
  var ratio = options.height / options.width;   

  // Get browser window size
  var browserwidth = $(window).width();
  var browserheight = $(window).height();

  // Scale the image
  if ((browserheight/browserwidth) > ratio){
    $(this).height(browserheight);
    $(this).width(browserheight / ratio);
  } else {
    $(this).width(browserwidth);
    $(this).height(browserwidth * ratio);
  }

  // Center the image
  $(this).css('left', (browserwidth - $(this).width())/2);
  $(this).css('top', (browserheight - $(this).height())/2);

  return this;      
};

$(document).ready(function() {
  // Get the URL based on the Background property
  function extractUrl(input) {
    return input.replace(/"/g,"").replace(/url\(|\)$/ig, "");
  }

  // Get the Background CSS Property.
  imageURL = extractUrl($("body").css("background-image"));

  $('body').prepend('<div id="triquiback"></div');
  $('#triquiback').prepend('<img id="triquibackimg" src="'+imageURL+'" />');

  var triquibackcss = {
        'left'     : '0',
        'top'      : '0',
        'position' : 'fixed',
        'overflow' : 'hidden',
        'zIndex'   : '-9999'
      };

  var triquibackimgcss = {
       'position' : 'fixed'
      }; 

  $("#triquiback").css(triquibackcss);
  $("#triquibackimg").css(triquibackimgcss);
});

$(window).load(function() {
  var pic = $('img');

  pic.removeAttr("width"); 
  pic.removeAttr("height");
  thiswidth = pic.width();
  thisheight = pic.height();

  // You need to specify the size of your background image here
  // (could be done automatically by some PHP code)
  var FullscreenrOptions = {
        width  : thiswidth,
        height : thisheight,
        bgID   : 'img'
      };

  // This will activate the full screen background!
  jQuery.fn.fullscreenr(FullscreenrOptions);
});
//]]>
</script>

那么......我做了哪些改变？

嗯，我设法做到了，这样你就不必指定背景图像/文件，它会自动从正文中选取它。

我还设法使其能够自行检测高度/宽度。

此外 - 我这样做是为了通过 JQuery 插入要调整大小的包装器和图像，而不是将其包含在标记中，并且也通过 JS 设置样式。

现在......问题/愿望？

好吧 - 对于初学者来说 - 这一切都在主 html 文档中。

我希望它作为外部文件，但我尝试的一切都失败了!可能是由于对其进行了黑客攻击。

接下来 - 是否可以这样做，以便我们可以指定它要应用到的元素(如果我们想要除 body 之外的其他元素)？

一般来说，它看起来一团糟(由于黑客工作的错误混合)，而且我很确定它效率低下/不整洁。有没有更好的方法来编写代码？

我不是 100% 确定，但也许 z-index 属性应该是可设置的!我认为在某些时候有人可能有不同的设置并需要不同的值？

(如果没有指定，是否包含默认值？)

IE6 ...我想我已经错过了如何使 CSS 适用于 IE6，如果是 IE6，是否可以识别浏览器并提供不同的样式？

除此之外，它似乎运行得很好。根据窗口大小调整大小，适用于 FF3/最新的 chrome(6？)、IE7 等。

我看到了一个测试 CSS3 是否受支持的小技巧，所以我还将测试是否可以使用它来检测是否需要(如果不需要，应该节省一些膨胀)。

+

我觉得自己很厚颜无耻地寻求帮助......

我自己也习惯做这类事情，但浪费一整天时间做某事似乎很愚蠢，因为有更聪明/更好的人可以帮助发现常见问题，并让我把这一天变成一周的时间拉头发:D

提前(如果我幸运的话)谢谢。

Answer 1

对于那些来这里寻找稳定插件来轻松调整网页背景图像大小的人来说，有一个很好的 Jquery 插件可以做到这一点!

参见: jQuery Easy Background Resize

<小时/>

与OP问题相关:

• 支持旧版浏览器:

目前 IE6 的市场份额非常低。 Safari、Firefox 和 Opera 等其他浏览器也是如此。

查看更多details here!

<小时/>

• 将代码包装到 Jquery 插件中:

获取您的代码并从中构建插件可以通过四个基本步骤完成:

1. 跨图书馆安全
2. 创建并命名您的插件函数
3. 允许可链接性
4. 开始构建插件功能

(1)首先要做的是创建一个包装函数，它允许您使用 $ 并且不会与可能包含的其他 JavaScript 框架发生冲突:

(function($) {
  // safe to use $ here and not cause conflicts
})(jQuery);

(2)接下来，创建您的插件将驻留在其中的函数。无论您如何命名此函数，您和其他人都将如何使用您的插件:

(function($) {
  $.fn.mypluginname = function() {
    // the plugin functionality goes in here
  }
})(jQuery);

(3)此时，请记住，由于 jQuery 采用任何选择器，因此您可能正在处理一个或多个对象。这意味着您需要确保您的插件循环遍历选择器匹配的每个元素并应用插件功能:

(function($) {
  $.fn.mypluginname = function() {
    return this.each(function() {
      // apply plugin functionality to each element
    });
  }
})(jQuery);

(4)在此阶段，您开始构建插件功能!对于您的情况，调整背景大小的所有必要步骤。

最终结果将是这样的:

$('div').mypluginname();

这是一个很好的教程，可以引导您完成整个过程，甚至可以添加您提到的配置选项!

参见:Creating A jQuery Plugin From Scratch