Comment obtenir l'effet de réflexion des images dans l'eau avec jquery

Avec le développement continu de la technologie Internet, le niveau de conception Web est de plus en plus élevé, et de plus en plus d'effets spéciaux et d'effets d'animation sont appliqués à la conception Web. Parmi eux, l’effet de réflexion dans l’eau est un effet très apprécié. Cela peut rendre les images ordinaires plus intéressantes et attrayantes et rendre les pages Web plus vivantes. Cet article explique comment utiliser jQuery pour obtenir l'effet de réflexion des images dans l'eau.

1. Idées d'implémentation d'effet

Jetons d'abord un coup d'œil aux idées d'implémentation pour l'effet de réflexion dans l'eau :

1 Dans la page HTML, utilisez un conteneur div pour contenir deux sous-éléments : un élément image et un. élément div vide, ce dernier utilisé pour montrer les reflets dans l'eau.
2. Utilisez les styles CSS pour définir les styles du conteneur et des sous-éléments, et définissez la position, l'index z et d'autres attributs pour que l'image et l'élément de réflexion dans l'eau se chevauchent.
3. Utilisez jQuery pour faire fonctionner les éléments DOM, inversez les éléments d'image, puis ajoutez-les aux éléments de réflexion de l'eau.
4. En définissant l'opacité, le filtre et d'autres styles de l'élément de réflexion de l'eau, il peut montrer l'effet de réflexion de l'eau.

2. Étapes spécifiques de mise en œuvre

Avant de commencer la mise en œuvre, un exemple de code est donné pour votre référence. Le code HTML est le suivant :

<div class="wrap">
  <img src="image.jpg" alt="">
  <div class="mirror"></div>
</div>

Le code CSS est le suivant :

.wrap {
  position: relative;
  width: 400px;
  height: 300px;
}
img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.mirror {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 100px;
  background: url(image.jpg) no-repeat;
  background-size: cover;
}

Le code jQuery est le suivant :

var mirror=$('.mirror');
var img=$('img').clone().css({
  'transform':'rotateX(180deg)',
  '-webkit-transform':'rotateX(180deg)',
  'opacity':'0.7',
  'filter':'alpha(opacity=70) blur(2px)'
});
mirror.append(img);

Ensuite, nous présentons en détail les étapes spécifiques de mise en œuvre :

1 Tout d'abord, créez un div. conteneur dans le code HTML pour Contient des éléments d'image et des éléments de réflexion de l'eau, et la classe du conteneur est wrap. À l'intérieur du conteneur, créez un élément img et un élément div pour afficher respectivement des images et des reflets d'eau. La classe de l'élément de réflexion d'eau est miroir.

2. Ensuite, définissez les styles du conteneur et des éléments enfants via les styles CSS. Le conteneur doit définir la position : attribut relatif, largeur et hauteur pour faciliter le positionnement des éléments enfants. L'élément img doit définir la position : l'attribut absolu, la distance entre la gauche et le haut et la valeur de l'indice z pour la superposition de position avec l'élément de réflexion dans l'eau. L'élément miroir doit également définir la position : l'attribut absolu, la distance entre la gauche et le bas et l'attribut z-index pour l'affichage sous l'élément img.

3. Ensuite, nous manipulons les éléments du DOM via jQuery. Tout d’abord, définissez un miroir variable pour représenter l’élément réfléchissant dans l’eau, puis définissez une variable img pour représenter l’image copiée. Utilisez la méthode clone() pour cloner l'élément img et définir le style de l'élément img. Remarque : L'élément img doit être inversé ici pour lui donner un effet miroir. L'implémentation spécifique consiste à utiliser l'attribut transform pour faire pivoter et définir sa valeur rotateX à 180 degrés.

4. Ajoutez l'élément img inversé à l'élément miroir et définissez les styles d'opacité et de filtre pour que l'image montre l'effet de réflexion dans l'eau. Définissez la valeur de l'attribut opacité sur 0,7, ce qui signifie définir l'opacité de l'élément réfléchissant dans l'eau à 70 %. Utilisez le filtre alpha charset=utf-8 pour définir la transparence de l'élément et utilisez le filtre flou pour définir le flou de l'élément.

3. Affichage des effets

En mettant en œuvre les étapes ci-dessus, nous pouvons ajouter l'effet de réflexion de l'eau des images à la page Web pour rendre la page plus vivante et intéressante. Ce qui suit est une capture d'écran de l'affichage de l'effet :

Comme le montre l'image, l'effet de réflexion dans l'eau de l'image est très réaliste, ce qui rend l'effet de page Web encore plus remarquable. . En utilisant la méthode de fonctionnement DOM de jQuery, vous pouvez non seulement obtenir l'effet de réflexion des images dans l'eau, mais également l'appliquer à d'autres effets spéciaux d'images, ce qui est l'une des compétences nécessaires pour les développeurs front-end.

4. Résumé

Cet article présente les étapes de mise en œuvre spécifiques de l'utilisation de jQuery pour obtenir l'effet de réflexion dans l'eau dans les images. Grâce à la mise en œuvre des étapes ci-dessus, nous pouvons ajouter l'effet de réflexion de l'eau des images à la page Web de manière très pratique et rapide, rendant la page Web plus vivante et intéressante. Dans le même temps, la maîtrise des compétences opérationnelles de jQuery DOM est également d'une grande importance pour les développeurs front-end. J'espère que les lecteurs pourront l'étudier attentivement.

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!