How to use jquery to achieve circular pictures

In web development, it is often necessary to display images on the page. If you want a picture to have a certain aesthetic quality, you often need to process the picture. Among them, turning the picture into a circle is a more popular method. So, how to use jquery to achieve circular pictures? This article will introduce it to you in detail.

1. HTML Template

First, add an image to the HTML template. In the parent element of this image, we need to add a blank div element. The purpose of this div element is to accommodate the image and add styles to the image.

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

2. CSS Style

Next, add basic styles for the parent element and image in CSS. Give the parent element a square with equal width and height, and set its rounded corners property to 50%. Also, set the width, height and borders for the image. Note that the rounded corner attributes of the parent element and the width and height of the image need to be adjusted according to specific needs.

.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

Now, we need to use jquery to operate the DOM element and add a circular mask layer to the image. The specific operations are as follows:

(1) Add a mask layer to the parent element

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

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

(2) Add a css style to the mask layer

.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) Mask it Add mouse move event to layer

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

Through the above operations, we can use jquery to realize a circular picture. When the mouse moves into the picture, the picture is covered by the mask layer, and the transparency of the mask layer gradually changes from 0 to 1; when the mouse moves out of the picture, the transparency of the mask layer gradually changes from 1 to 0, and the picture is displayed again.

Summary

In Web development, adding some special effects to pictures is one of the important means to improve user experience. Turning a picture into a circle is a simple and beautiful effect. By using jquery, we can easily achieve circular picture effects and add some interactive effects to the pictures to make the page more attractive.

The above is the detailed content of How to use jquery to achieve circular pictures. For more information, please follow other related articles on the PHP Chinese website!