Maison > Article > interface Web > jquery cliquez pour changer l'image

jquery cliquez pour changer l'image

PHPzoriginal: 2023-05-25 10:22:37472parcourir

Dans le développement web, il est souvent nécessaire d'utiliser des éléments d'image pour enrichir le contenu et les effets visuels de la page. Parfois, nous devons modifier l'effet d'affichage lorsque l'utilisateur clique sur l'image, par exemple passer d'une image normale à une image en surbrillance. Ensuite, à ce stade, vous devez utiliser la bibliothèque jQuery pour obtenir cet effet interactif.

jQuery est une bibliothèque JavaScript couramment utilisée qui simplifie la traversée et les opérations de documents HTML, le traitement des événements, les effets d'animation et d'autres opérations. Sa syntaxe est concise et facile à utiliser, et il propose également un grand nombre de plug-ins. Ci-dessous, nous utiliserons jQuery pour implémenter un exemple de modification des effets d'image en fonction des clics.

Tout d'abord, nous devons insérer l'élément d'image que nous souhaitons exploiter dans le document HTML. Ici, nous prenons comme exemple une voiture bleue.

<!DOCTYPE html>
<html>
<head>
    <title>jQueryjquery cliquez pour changer limage</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>

Parmi eux, nous utilisons des styles CSS pour définir la taille, l'image d'arrière-plan et le style du curseur de l'image. En même temps, nous spécifions l'identifiant de cet élément comme "car" afin qu'il puisse être appelé ultérieurement en JavaScript.

Ensuite, nous devons écrire une fonction JavaScript pour implémenter l'événement click de l'image. Dans ce cas, nous pouvons utiliser les fonctions fournies par la bibliothèque jQuery pour modifier le style de l'élément image.

$(function() {
    $('#car').click(function() {
        $(this).css('background-image', 'url("blue-car-highlight.jpg")');
    });
});

Dans cette fonction, nous obtenons d'abord l'élément d'image avec l'ID "car" via le symbole "$" de jQuery, puis y lions une fonction d'écoute d'événement de clic. Lorsque l'utilisateur clique sur l'image de la voiture, cette fonction d'écoute sera exécutée.

Dans cette fonction d'écoute, nous utilisons la fonction "css" fournie par la bibliothèque jQuery pour modifier le style de l'élément image. Le premier paramètre est le nom de l'attribut de style à modifier, et le deuxième paramètre est la valeur de l'attribut. à régler. Dans cet exemple, nous modifions l'URL de l'image d'arrière-plan en "blue-car-highlight.jpg", qui est une image d'une voiture en surbrillance.

Il est à noter que puisque l'image n'a pas d'effet de surbrillance dans l'état initial, nous devons ajouter une autre image en dehors de cet élément d'image, telle que "blue-car-highlight.jpg" (l'image de voiture en surbrillance) comme effet d'affichage après avoir cliqué.

L'effet final est comme le montre l'image ci-dessous.

jquery cliquez pour changer limage

Jusqu'à présent, nous avons implémenté avec succès la fonction de modification des effets d'image en un seul clic. Grâce aux exemples ci-dessus, nous avons non seulement appris la syntaxe de base de la bibliothèque jQuery, mais également comment utiliser la bibliothèque jQuery pour implémenter une page Web interactive.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser le sélecteur de base jqueryArticle suivant：Comment utiliser le sélecteur de base jquery

Articles Liés

Voir plus