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ドキュメントにあります。

私は外部ファイルとして好きですが、試したすべてが失敗しました！おそらくハックをやっているからです。

それに続いて、適用する要素を指定できるようにすることができます（本体以外のものが必要な場合）？

一般的に - それは混乱のように見えます（ハックの誤ったマッシュのため）、私はそれが非効率的であると確信しています。コードを実行するより良い方法はありますか？

私は100％確信していませんが、おそらくz-indexプロパティを設定する必要があります。ある時点で誰かが別の設定をして別の値を望む可能性があると思いますか？

（何も指定されていない場合のデフォルトを含めて？）

IE6私はIE6のCSSの仕事を作る方法を逃したと思う...、それはブラウザを識別した場合に異なるスタイルを供給することが可能ですそれはIE6ですか？

それ以外は、十分にうまくいくようです。 は、ウィンドウのサイズ変更にサイズを変更FF3で動作します/最新のクロム（6？）、IE7など

私はCSS3をサポートしているか否かテストするためにちょっとしたトリックを見てきました、 はので、私はまたかどうかを確認するためにテストします私はこれが必要かどうかを検出するために使用することができます（必要でない場合は膨大な時間を節約する必要があります）。

+

私はそこに、私は自分自身の事のこの種を行うために使用されるんだけど、何かをして一日を無駄に愚かなようだ

...援助を求めてとても生意気な感じより一般的な問題を見つけ出し、その日を髪を引っ張って1週間にすることができます。D

事前に（もし私が運が良ければ）ありがとうございます。

Answer 1

ここに来て、安定したプラグインを使用してウェブページの背景イメージを簡単にサイズ変更することができる人は、そのようなJquery Pluginがあります。

を参照してください：OPの質問に関連jQuery Easy Background Resize

---

：古いブラウザ用

• サポート：

IE6の市場シェアは今日ですvエリー低い。同じことがSafari、Firefox、Operaなどの他のブラウザにも当てはまります。

ラップのjQueryプラグインにコードよりdetails here!

---

• を参照してください：

あなたのコードを取り、外のプラグインを構築しますそれは4つの基本的なステップで行うことができます：

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