jqueryクリックして画像を変更する-フロントエンドQ&A-php.cn

jqueryクリックして画像を変更する

PHPz

リリース： 2023-05-25 10:22:37

オリジナル

525 人が閲覧しました

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クリックして画像を変更する