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

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错误的混搭），我敢肯定它是该死的效率低下/不整洁。有没有更好的方法来执行代码？

我不是100％确定，但也许z-index属性应该是可设置的！因为我认为在某些时候有人可能会有不同的设置并渴望不同的价值？

（包括如果没有指定一个默认？）

IE6 ...我想我已经错过了如何针对IE6的CSS的工作，才有可能找出浏览器，如果提供不同的造型它是IE6？

所有这一切，似乎工作得很好。 调整窗口大小，在FF3 /最新铬（6？），IE7等工作

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

+

我觉得这么厚脸皮寻求帮助......

我已经习惯了做这样的事情我自己，但似乎傻浪费了一整天做的事情，当有更聪明/更好的人，可以帮助发现的常见问题和救我转弯的那一天到揪头发的一周：d

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

Answer 1

对于那些来这里寻找为稳定的插件来轻松调整网页的背景图像，有一个很好的jquery插件，就是这样！

参见：jQuery Easy Background Resize

---

相关的OP问题：

• 支持旧的浏览器：

对IE6的市场份额今日v低。 Safari，Firefox和Opera等其他浏览器也一样。

查看更多details here!

---

• 裹的代码放到一个jQuery插件：

把你的代码和插件打造出来的它可以在四个基本步骤中完成：

1. 跨库安全
2. 创建和命名你的插件功能
3. 允许chainability
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