Question

希望有一个背景，用浏览器窗口调整大小/缩放/伸展。

虽然似乎有一个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文档。

我希望它作为外部文件，但我尝试的一切都失败了！可能是因为它上面做了hackjob。

之后 - 是否可以这样做，以便我们可以指定要应用的元素（如果我们想要除了body之外的其他东西）？

一般来说 - 它看起来像一团糟（由于hackjob的错误混合），我很确定它是低效/不整洁的。有没有更好的方法来执行代码？

我不是百分百肯定，但也许z-index属性应该是可设置的！我认为有可能在某些时候有人可能有不同的设置，并希望有不同的价值？

（如果没有指定，则包括默认值？）

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

除此之外，它似乎运作良好。调整窗口大小调整大小，适用于FF3 /最新chrome（6？），IE7等。

我看过一个测试是否支持CSS3的小技巧，所以我也会测试看看我是否可以使用它来检测是否需要它（如果不需要，应该保存一些膨胀）。

+

我感到非常厚颜无耻，寻求帮助......

我自己习惯这样做，但是浪费一整天做某事似乎很愚蠢，当有更聪明/更好的人可以帮助发现常见问题并节省我把那一天变成一周拔毛：D

提前（如果我很幸运）谢谢你。

Answer 1

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

请参阅： jQuery Easy Background Resize

与OP问题相关：

支持旧浏览器：

今天IE6的市场份额非常低。其他浏览器也是如此，例如Safari，Firefox和Opera。

enter image description here

查看更多details here!

将代码包装到Jquery插件中：

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

跨图书馆安全
创建并命名您的插件功能
允许可链接性
开始构建插件功能

<强>（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

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

1 个答案: