jQuery バックグラウンド プラグイン バックストレッチの使用法 guide_jquery

1. バックストレッチプラグイン機能

ウェブサイトの外観を最適化します。主にページの背景画像を設定するために使用されますが、html要素の背景画像も設定できます。複数の背景画像を設定し、一定間隔で周期的に表示することができます。

注意

ただし、背景画像を設定するときに、画像が大きすぎて、Web サイトで使用されるリソースが制限されている場合は、画像のサイズを圧縮する必要があります。そうしないと、画像の読み込みが非常に遅くなります。公式ウェブサイトのデモをテストしましたが、画像は比較的大きく、仮想空間でウェブサイトを開くと画像の読み込みが少し遅くなります。

プラグイン デモのスクリーンショットの効果は明ら​​かではないため、この記事には掲載しません。公式デモにアクセスして確認するか、この記事の下に私がテストした使用例もあります。このプラグインは中国語のデモをご覧いただけます。

テスト ケースで使用される画像はインターネットから取得したもので、サイズは 100kb を超えています。公式の画像を使用してください。テストプラグインなので画像は圧縮されていません。

2.バックストレッチ公式アドレス

プラグインの使用方法の詳細な手順は、公式アドレスにあります: https://github.com/srobbin/jquery-backstretch

3. バックストレッチの使い方

1. 参照ファイル


2. テストに使用されるスタイル

body { font-family: 微软雅黑; line-height: 1.3em; -webkit-font-smoothing: antialiased; }
.container {
   width: 90%;
   margin: 20px auto;
   background-color: #FFF;
   padding: 20px;
 }
h1{
  font-weight:normal;
}
pre, code {
 font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
 font-size: 12px;
 color: #333;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}
pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; overflow: scroll; }
code { padding: 2px 4px; background-color: #F7F7F9; border: 1px solid #E1E1E8; color: #D14; }
.other { height: 300px; color: #FFF; }
.other div {
 position: absolute;
 bottom: 0;
 width: 100%;
 background: #000;
 background: rgba(0,0,0,0.7);
}
.other div p { padding: 10px; }

3.jsを使用します。プラグインの使い方はとても簡単です。

$(function(){
  $(".container").css({ opacity: .8 });  //设置透明度
  $.backstretch(["bg.jpg"]); //背景
  $(".other").backstretch(["b.jpg","a.jpg","coffee.jpg"],{duration:4000}); //元素背景，切换现实
});

実際、jQuery の機能を利用して、Web ページの背景をカスタマイズする方法はたくさんあります。jQuery によって実装された画像切り替え効果の例をいくつか使用して、動的画像切り替えを変更して実装することもできます。皆さん気に入ってますよ！

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。