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

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

1. HTML テンプレート

まず、HTML テンプレートに画像を追加します。この画像の親要素に、空の div 要素を追加する必要があります。この 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 = $('
', { "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 サイトの他の関連記事を参照してください。