jqueryを使用して円形の画像を実現する方法

Web 開発では、ページ上に画像を表示することが必要になることがよくあります。写真に特定の美的品質を持たせたい場合は、多くの場合、写真を処理する必要があります。中でも、絵を丸く加工する方法が人気です。では、jQuery を使用して円形の画像を実現するにはどうすればよいでしょうか?この記事では詳しく紹介していきます。

1. HTML テンプレート

まず、HTML テンプレートに画像を追加します。この画像の親要素に、空の div 要素を追加する必要があります。この div 要素の目的は、画像を収容し、画像にスタイルを追加することです。

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

2. CSS スタイル

次に、CSS で親要素と画像の基本スタイルを追加します。親要素に幅と高さが等しい正方形を与え、その角丸プロパティを 50% に設定します。また、画像の幅、高さ、境界線を設定します。親要素の角の丸い属性と画像の幅と高さは、特定のニーズに応じて調整する必要があることに注意してください。

.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 操作

次に、jquery を使用して DOM 要素を操作し、円形のマスク レイヤーを画像に追加する必要があります。具体的な操作は以下の通りです。

(1) 親要素にマスクレイヤーを追加

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

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

(2) マスクレイヤーに CSS スタイルを追加

.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) マスクします レイヤーにマウス移動イベントを追加します

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

以上の操作により、jqueryを使って円形の絵を実現することができます。マウスが画像内に移動すると、画像はマスク レイヤで覆われ、マスク レイヤの透明度は 0 から 1 に徐々に変化します。マウスが画像の外に移動すると、マスク レイヤの透明度は 1 から徐々に変化します。 0にすると、再び画像が表示されます。

概要

Web 開発では、画像に特殊効果を追加することは、ユーザー エクスペリエンスを向上させる重要な手段の 1 つです。写真を円に変えると、シンプルで美しい効果が得られます。 jquery を使用すると、円形の画像効果を簡単に実現し、画像にインタラクティブな効果を追加してページをより魅力的にすることができます。

以上がjqueryを使用して円形の画像を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。