jQuery プラグイン bgStretcher.js は全画面背景効果を実装します_jquery

bgStretcher 2011 (Background Stretcher) は、Web ページに複数の背景画像を追加できる jQuery プラグインであり、複数の背景画像を自動的に切り替えることができます。同時に、背景画像のサイズを Web ページに適応させることができます。ブラウザウィンドウのサイズ。背景画像の切り替え効果には、フェードイン、フェードアウト、スクロール、スライドショーが含まれます。スクロールとスライドショーを選択した場合は、方向を上下左右または左上、右下、右上から選択できます。 、左下。映像の切り替え順序も順方向、逆方向、ランダムに設定できます。さらに多くのオプションがある場合は、ゆっくり調べてください。

bgStretcher は、大きな画像 (または画像のグループ) を Web ページの背景に追加できる jQuery プラグインで、ウィンドウ領域全体を埋めるように画像のサイズを比例的に変更します。このプラグインは、複数の画像モードを使用する場合、スライドショーとして機能します (スライドショーの速度と長さは設定可能です)。

プラグイン機能:

スクリプト ファイルはシンプルでセットアップが簡単です。すべての新しいブラウザをサポートし、単一または複数の画像をサポートします。

プラグインの使用法:

まず最初に、もちろん、プラグインをダウンロードする必要があります。プラグイン パッケージには、必要な JS ファイルがすでに含まれています。

次に、Web ページの と の間に次のコードを挿入します。これは、コード内のパスに注意してください。相対パスか絶対パスかは、実際のニーズによって異なります。

<link rel="stylesheet" type="text/css" href="./main.css" />
<link rel="stylesheet" type="text/css" href="../bgstretcher.css" />
<script type="text/javascript" src="../jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../bgstretcher.js"></script>

次に、上記のコードの後に​​次のコードを挿入して、bgStretcher プラグインを初期化し、プラグインがどの要素で動作するかを指定し、プラグイン オプションを設定する必要があります。同様に、コード内の画像パスを間違えないように注意してください。

<script type="text/javascript">
 $(document).ready(function(){
 
  // Initialize Backgound Stretcher 
 $('.demoo').bgStretcher({
 images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg', 'images/sample-5.jpg', 'images/sample-6.jpg'],
 imageWidth: 800, 
 imageHeight: 400, 
 slideDirection: 'N',
 slideShowSpeed: 1000,
 transitionEffect: 'fade',
 sequenceMode: 'normal',
 });
 
 });
</script>

このプラグインは Web ページ全体の背景に使用するだけでなく、少なくともこの要素 (DIV など) の背景を設定することもできます。 。 Web ページ要素は、ID またはクラスによって選択されます。要素名 BODY は、Web ページ内の唯一の要素名である必要があります。これは、Web ページ全体の背景を設定することを意味します。ページ上の特定の DIV ブロックの背景を設定する場合は、DIV の ID を定義するか、そのスタイル クラス名を知っている必要があります。そうしないと、素晴らしい効果が得られます。

プラグイン オプション:

構成オプション	デフォルト値	オプションの説明
imageContainer	bgstretcher	bgStretcher は、DOM ツリー内のイメージ リストの構造を自動的に構築します。このパラメーターは、 FireBug を使用してツリーを検査してみてください。 to get an idea how it's constructed.
resizeProportionally	true	Indicates if background image(s) will be resized proportionally or not.
resizeAnimate	false	Indicates if background image(s) will be resized with animation. (Be careful, this may slow down some PCs if your images are large.)
images	empty	An array containing list of images to be displayed on page's background.
imageWidth	1024	Original image's width.
imageHeight	768	Original image's height.
maxWidth	auto	Maximum image's width.
maxHeight	auto	Maximum image's height.
nextSlideDelay	3000 (3 seconds)	Numeric value in milliseconds. The parameter sets delay until next slide should start.
slideShowSpeed	normal	Numeric value in milliseconds or jQuery string value (‘fast', ‘normal', ‘slow'). The parameter sets the speed of transition between images.
slideShow	true	Allows or disallows slideshow functionality.
transitionEffect	fade	Transition effect (use also: none, simpleSlide, superSlide).
slideDirection	N	Slide Diraction: N – north, S – south, W – west, E – East (if transitionEffect = superSlide use also: NW, NE, SW, SE).
sequenceMode	normal	Sequence mode (use also: back, random)
buttonPrev	empty	Previous button CSS selector
buttonNext	empty	Next button CSS selector
pagination	empty	CSS selector for pagination
anchoring	‘left top'	Anchoring bgStrtcher area regarding window
anchoringImg	「左上」	ウィンドウに関する画像のアンカー
preloadImg	偽	プリロード画像の場合は true を使用します
stratElementIndex	0	開始要素インデックス
コールバック関数	ヌル	コールバック関数の名前

Kaedah pemalam:

Nama kaedah Penerangan kaedah
$(objID).bgStretcher.play()                                                                               $(objID).bgStretcher.pause()                                                                                                                                                                                                                                                                                             $(objID).bgStretcher.sliderDestroy() Musnahkan tayangan slaid latar belakang

Keserasian pelayar:

MS Internet Explorer 6, 7, 8, 9

Mozilla Firefox 2, 3, 4

Opera 9
Apple Safari
Google Chrome

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.