So erstellen Sie mit JQuery kreisförmige Bilder

Bei der Webentwicklung ist es oft notwendig, Bilder auf der Seite anzuzeigen. Wenn Sie möchten, dass ein Bild eine bestimmte ästhetische Qualität hat, müssen Sie das Bild häufig bearbeiten. Unter diesen ist die Umwandlung des Bildes in einen Kreis eine beliebtere Methode. Wie kann man also mit jquery ein kreisförmiges Bild realisieren? In diesem Artikel wird es Ihnen ausführlich vorgestellt.

1. HTML-Vorlage

Fügen Sie zunächst ein Bild zur HTML-Vorlage hinzu. Im übergeordneten Element dieses Bildes müssen wir ein leeres div-Element hinzufügen. Der Zweck dieses div-Elements besteht darin, das Bild unterzubringen und dem Bild Stile hinzuzufügen.

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

2. CSS-Stile

Als nächstes fügen Sie grundlegende Stile für übergeordnete Elemente und Bilder in CSS hinzu. Geben Sie dem übergeordneten Element ein Quadrat mit gleicher Breite und Höhe und setzen Sie die Eigenschaft „Abgerundete Ecken“ auf 50 %. Legen Sie außerdem Breite, Höhe und Ränder für das Bild fest. Beachten Sie, dass die abgerundeten Eckenattribute des übergeordneten Elements sowie die Breite und Höhe des Bildes entsprechend den spezifischen Anforderungen angepasst werden müssen.

.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. jquery-Operation

Jetzt müssen wir jquery verwenden, um DOM-Elemente zu bedienen und dem Bild eine kreisförmige Maskenebene hinzuzufügen. Die spezifischen Vorgänge sind wie folgt:

(1) Fügen Sie eine Maskenebene zum übergeordneten Element hinzu

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

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

(2) Fügen Sie einen CSS-Stil zur Maskenebene hinzu

.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) Fügen Sie ein Mausbewegungsereignis zur Maskenebene hinzu

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

Durch die oben genannten Operationen können wir jquery verwenden, um kreisförmige Bilder zu realisieren. Wenn die Maus in das Bild hinein bewegt wird, wird das Bild von der Maskenebene bedeckt, und die Transparenz der Maskenebene ändert sich allmählich von 0 auf 1. Wenn die Maus aus dem Bild heraus bewegt wird, ändert sich die Transparenz der Maskenebene allmählich von 1 auf 0 und das Bild wird erneut angezeigt.

Zusammenfassung

In der Webentwicklung ist das Hinzufügen einiger Spezialeffekte zu Bildern eines der wichtigsten Mittel zur Verbesserung der Benutzererfahrung. Ein Bild in einen Kreis zu verwandeln ist ein einfacher und schöner Effekt. Durch die Verwendung von JQuery können wir auf einfache Weise kreisförmige Bildeffekte erzielen und den Bildern einige interaktive Effekte hinzufügen, um die Seite attraktiver zu gestalten.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit JQuery kreisförmige Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!