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