Comment utiliser jquery pour obtenir des images circulaires

En développement web, il est souvent nécessaire d'afficher des images sur la page. Si vous souhaitez qu'une image ait une certaine qualité esthétique, vous devez souvent la traiter. Parmi eux, transformer l’image en cercle est une méthode plus populaire. Alors, comment utiliser jquery pour réaliser des images circulaires ? Cet article vous le présentera en détail.

1. Modèle HTML

Tout d'abord, ajoutez une image au modèle HTML. Dans l'élément parent de cette image, nous devons ajouter un élément div vide. Le but de cet élément div est d'accueillir l'image et d'ajouter des styles à l'image.

<div class="img-circle-container">
  <img src="your-image-url" alt="Image">
</div>

2. Styles CSS

Ensuite, ajoutez des styles de base pour les éléments parents et les images en CSS. Donnez à l'élément parent un carré de largeur et de hauteur égales et définissez sa propriété de coins arrondis sur 50 %. Définissez également la largeur, la hauteur et les bordures de l’image. Notez que les attributs de coin arrondi de l'élément parent ainsi que la largeur et la hauteur de l'image doivent être ajustés en fonction des besoins spécifiques.

.img-circle-container {
  width: 150px; /* 父元素的宽度 */
  height: 150px; /* 父元素的高度 */
  border: 2px solid #222; /* 图片边框 */
  border-radius: 50%; /* 圆角属性 */
  overflow: hidden; /* 图片超出父元素的部分隐藏 */
}
.img-circle-container img {
  width: 100%; /* 图片宽度 */
  height: auto; /* 图片高度 */
  border: none; /* 去除图片边框（可选）*/
}

3. Opération jquery

Maintenant, nous devons utiliser jquery pour faire fonctionner les éléments DOM et ajouter un calque de masque circulaire à l'image. Les opérations spécifiques sont les suivantes :

(1) Ajouter un calque de masque à l'élément parent

// 获取图片父元素
var $imgContainer = $('.img-circle-container');

// 动态添加遮罩层
var $mask = $('<div>', {
  "class": "mask" // 自定义样式名称
}).appendTo($imgContainer);

(2) Ajouter un style CSS au calque de masque

.mask {
  position: absolute; /* 绝对定位 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 遮罩层背景色 */
  border-radius: 50%; /* 圆角属性 */
  opacity: 0; /* 初始透明度为0 */
  transition: opacity 0.3s ease-in-out; /* 过渡动画效果 */
}

(3) Ajouter un événement de déplacement de souris au calque de masque

// 鼠标移入时，遮罩层的透明度改为1
$imgContainer.on('mouseenter', function() {
  $(this).find('.mask').css('opacity', 1);
});
// 鼠标移出时，遮罩层的透明度改为0
$imgContainer.on('mouseleave', function() {
  $(this).find('.mask').css('opacity', 0);
});

Grâce aux opérations ci-dessus, nous pouvons utiliser jquery pour réaliser des images circulaires. Lorsque la souris entre dans l'image, l'image est recouverte par le calque de masque et la transparence du calque de masque passe progressivement de 0 à 1 ; lorsque la souris sort de l'image, la transparence du calque de masque passe progressivement de 1 ; à 0 et l’image s’affiche à nouveau.

Résumé

Dans le développement Web, l'ajout d'effets spéciaux aux images est l'un des moyens importants pour améliorer l'expérience utilisateur. Transformer une image en cercle est un effet simple et magnifique. En utilisant jquery, nous pouvons facilement obtenir des effets d'image circulaires et ajouter des effets interactifs aux images pour rendre la page plus attrayante.

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!