Comment utiliser jquery pour obtenir un effet de retournement d'image-connaissance HTML-php.cn

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

藏色散人

Libérer： 2018-12-19 09:48:50

original

7657 Les gens l'ont consulté

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 ) afin d'obtenir l'effet de retournement d'image.

Comment utiliser jquery pour obtenir un 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>

Copier après la connexion

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!