ホームページ > 記事 > ウェブフロントエンド > jqueryクリックして画像を変更する
jqueryクリックして画像を変更する
- PHPzオリジナル
- 2023-05-25 10:22:37472ブラウズ
Web 開発では、ページのコンテンツや視覚効果を豊かにするために画像要素を使用することが必要になることがよくあります。場合によっては、通常の画像から強調表示された画像に変更するなど、ユーザーが画像をクリックしたときの表示効果を変更する必要があります。この時点で、このインタラクティブな効果を実現するには、jQuery ライブラリを使用する必要があります。
jQuery は、HTML ドキュメントの走査と操作、イベント処理、アニメーション効果、その他の操作を簡素化する、一般的に使用される JavaScript ライブラリです。その構文は簡潔で使いやすく、選択できるプラグインも多数あります。以下では、jQuery を使用して、クリックに基づいて画像効果を変更する例を実装します。
まず、操作したい画像要素を HTML ドキュメントに挿入する必要があります。ここでは青い車を例に挙げます。
<!DOCTYPE html>
<html>
<head>
<title>jQueryjqueryクリックして画像を変更する</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#car {
width: 300px;
height: 200px;
background-image: url("blue-car.jpg");
background-size: cover;
cursor: pointer;
}
</style>
</head>
<body>
<div id="car"></div>
</body>
</html>その中で、CSS スタイルを使用して画像のサイズ、背景画像、カーソル スタイルを定義します。同時に、この要素の ID を「car」として指定し、後で JavaScript で呼び出せるようにします。
次に、画像のクリック イベントを実装する JavaScript 関数を記述する必要があります。このイベントでは、jQuery ライブラリによって提供される関数を使用して、画像要素のスタイルを変更できます。
$(function() {
$('#car').click(function() {
$(this).css('background-image', 'url("blue-car-highlight.jpg")');
});
});この関数では、まず jQuery の "$" 記号を使用して ID が "car" の画像要素を取得し、それにクリック イベント リスニング関数をバインドします。ユーザーが車の写真をクリックすると、このリスニング機能が実行されます。
このリスニング関数では、jQuery ライブラリが提供する「css」関数を使用して画像要素のスタイルを変更します。最初のパラメーターは変更するスタイル属性の名前で、2 番目のパラメーターは次のとおりです。属性値。この例では、背景画像の URL を、ハイライトされた車の写真である「blue-car-highlight.jpg」に変更します。
画像には初期状態ではハイライト効果がないため、この画像要素の外側に「blue-car-highlight.jpg」などの別の画像を追加する必要があることに注意してください。車の写真）をクリックすると表示されます。
最終的な効果を下の図に示します。
これまでのところ、ワンクリックで画像効果を変更する機能を実装することに成功しました。上記の例を通じて、jQuery ライブラリの基本構文を学習しただけでなく、jQuery ライブラリを使用してインタラクティブな Web ページを実装する方法も学習しました。
以上がjqueryクリックして画像を変更するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。