jQueryでピクチャーショーを変更する

インターネット技術の発展と進歩に伴い、私たちの生活において画像がますます重要な役割を果たすようになっており、人気のある JavaScript ライブラリである jQuery を使用すると、画像の表示効果を簡単に変更できます。この記事ではjQueryを使って映像ショーを改変する方法を紹介します。

1. 準備

始める前に、いくつかの準備をする必要があります。

1.1 jQuery のダウンロード

まず、[公式 Web サイト](https://jquery.com/download/) にアクセスして、jQuery の最新バージョンをダウンロードする必要があります。 jQuery を作成してプロジェクトに導入します。例:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

1.2 画像の追加

HTML に画像を追加し、それに ID 属性を追加して、jQuery での操作を容易にします。例:

<img src="img/photo.jpg" id="photo">

2. 画像を変更する show

show() は、要素を表示するための jQuery のメソッドです。これを使用して画像の表示を変更できます。

一般的に使用される show() メソッドの一部を次に示します。

2.1 画像の表示

$('#photo').show();

このコードは画像を表示します。画像が非表示になっている場合は表示されます。画像がすでに表示されている場合、アクションは実行されません。

2.2 画像を表示し、アニメーション効果を追加する

いくつかのパラメータを show() メソッドに追加して、アニメーション効果を追加できます。

$('#photo').show('slow');
$('#photo').show('fast');

これら 2 つのコードは、それぞれ画像を低速と高速で表示し、簡単なアニメーション効果を追加します。

2.3 画像の表示とコールバック関数の追加

表示完了後に他の操作を実行するために、show() メソッドにコールバック関数を追加できます。

$('#photo').show('slow', function() {
  console.log('图片已经显示');
});

このコードは画像を低速で表示し、表示完了後にコンソールに文字列を出力します。

3. show()

のさまざまな show() メソッドについて説明する前に、 についてさらに理解する必要があります。深く show() メソッド。

3.1 show() メソッドの使用法

jQuery での show() メソッドの使用法は非常に簡単です。要素はセレクターを通じて選択でき、show() メソッドを呼び出して要素を表示できます。

$(selector).show(speed, callback)

パラメータの説明:

• selector: 必須、表示される要素。
• speed: オプションで、使用する速度効果を指定します。
• callback: オプションで、アニメーションの完了時に実行される関数を指定します。

3.2 速度効果

show() メソッドで speed パラメータを指定することで、速度を制御できます。アニメーション。速度の単位はミリ秒、または「遅い」または「速い」文字列にすることも、カスタマイズすることもできます。例:

$('#photo').show(1000);        // 以1秒速度显示图片
$('#photo').show('slow');      // 以慢速显示图片，相当于400ms
$('#photo').show('fast');      // 以快速显示图片，相当于200ms
$('#photo').show('medium');    // 以中等速度显示图片，相当于600ms
$('#photo').show('veryfast');  // 以极快速度显示图片，相当于50ms

3.3 コールバック関数

コールバック関数は、アニメーションの完了後に他の操作を実行できるオプションのパラメーターです。例:

$('#photo').show('slow', function() {
  console.log('图片已经显示');
});

このコードは、画像を低速で表示し、表示が完了した後にコンソールに文字列を出力します。

4. 画像を変更する hide

hide() メソッドは show() メソッドに似ており、要素を非表示にするために使用されます。一般的に使用される hide() メソッドの一部を以下に示します。

4.1 画像を非表示にする

$('#photo').hide();

このコードは画像を非表示にします。画像がすでに非表示になっている場合は、何も実行されません。すでに画像が表示されている場合は非表示になります。

4.2 画像を非表示にしてアニメーション効果を追加する

いくつかのパラメータを hide() メソッドに追加して、アニメーション効果を追加できます。

$('#photo').hide('slow');
$('#photo').hide('fast');

これら 2 つのコードは、それぞれ低速と高速で画像を非表示にし、単純なアニメーション効果を追加します。

4.3 画像を非表示にしてコールバック関数を追加する

非表示の完了後に他の操作を実行するために、hide() メソッドにコールバック関数を追加できます。

$('#photo').hide('slow', function() {
  console.log('图片已经隐藏');
});

このコードは、画像をゆっくりと非表示にし、非表示が完了した後にコンソールに文字列を出力します。

5. 概要

この記事では、一般的に使用される show() メソッドなど、jQuery を使用して画像ショーを変更する方法と、 show() メソッド、および hide() メソッドを使用して画像を非表示にする方法。 jQuery を使用する場合は、練習すれば完璧になります。

以上がjQueryでピクチャーショーを変更するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。