2

望ましいのは、ブラウザ ウィンドウに合わせてサイズ変更/スケーリング/ストレッチする背景を持つことです。

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

では、よろしくお願いします（運が良ければ）。

4

1 に答える 1

0

Web ページの背景画像のサイズを簡単に変更できる安定したプラグインを探している人のために、まさにそれを行う優れた Jquery プラグインがあります。

参照: jQuery Easy Background Resize

OPの質問に関連：

  • 古いブラウザのサポート:

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

ここに画像の説明を入力

詳細はこちら！

  • コードを Jquery プラグインにラップします。

コードからプラグインを作成するには、次の 4 つの基本的な手順を実行します。

  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 は任意のセレクターを使用するため、1 つまたは複数のオブジェクトを処理できることに注意してください。これは、プラグインがセレクターに一致する各要素をループして、プラグイン機能を適用することを確認する必要があることを意味します。

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

(4) この段階で、プラグイン機能の構築を開始します。あなたの場合、背景のサイズ変更に必要なすべての手順。

最終結果は、次のようなものになります。

$('div').mypluginname();

これは、プロセス全体を説明するための優れたチュートリアルであり、前述のように構成オプションを追加することもできます!

参照: jQuery プラグインをゼロから作成する

于 2012-05-10T19:29:20.570 に答える