Maison > Article > programmation quotidienne > Comment utiliser jquery pour obtenir un effet de retournement d'image

Comment utiliser jquery pour obtenir un effet de retournement d'image

藏色散人original: 2018-12-15 16:53:297649parcourir

jquery peut utiliser la méthode jQuery attr() pour obtenir un effet de retournement d'image. Utilisez ensuite la méthode jquery attr() pour modifier la source de l'image (c'est-à-dire l'attribut src de la balise a1f02c36ba31691bcfe87b2722de723b) afin d'obtenir l'effet de retournement d'image.

Ci-dessous, nous vous présenterons la méthode de jquery pour obtenir l'effet de retournement d'image avec un exemple de code simple.

L'exemple de code est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jquery实现图片翻转效果示例</title>
    <style>
 .card{
            margin: 30px;
 }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
 $(function () {
            $("img").click(function(){
                // 改变图片的src属性
 $(this).attr("src", "./images/1.jpg");
 });
 });
 </script>
</head>
<body>
<div class="card">
    <img src=".images/2.jpg" alt="Poker Card">
</div>
</body>
</html>

Ici, nous définissons d'abord une image (2.jpg), puis ajoutons un événement de clic à cette image. Lorsque l'on clique sur cette image, Déclenchez la méthode attr() pour modifier l'attribut src de l'image, c'est-à-dire la remplacer par une autre image (1.jpg).

L'effet final de retournement d'image est le suivant :

Comment utiliser jquery pour obtenir un effet de retournement d'image

La méthode attr() peut définir ou renvoyer la valeur d'attribut de l'image sélectionnée. élément . Selon les paramètres de la méthode, son fonctionnement est également différent.

Remarque : lorsque cette méthode est utilisée pour renvoyer des valeurs d'attribut, la valeur du premier élément correspondant est renvoyée.

Lorsque cette méthode est utilisée pour définir des valeurs d'attribut, une ou plusieurs paires attribut/valeur sont définies pour l'élément correspondant.

Cet article concerne la méthode d'implémentation spécifique de jquery pour obtenir l'effet de retournement d'image. Il est simple et facile à comprendre. J'espère qu'il sera utile aux amis dans le besoin !

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 appeler plusieurs fonctions js en cas de clicArticle suivant：Comment appeler plusieurs fonctions js en cas de clic

Articles Liés

Voir plus