How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?

Create cool web interaction: click on the picture, and the surrounding pictures spread and enlarge!

Many websites use this compelling interaction: click on an image and it will enlarge, while the surrounding images will spread out. This article will explain in detail how to achieve this effect using CSS3 and JavaScript.

First, we need to add a click event listener to each image. When a user clicks on an image, the JavaScript code executes, resizing the position and size of all images. The key is to use the transform attribute of CSS3 to achieve the displacement and scaling of the picture.

The steps are as follows:

1. HTML structure: for each <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312337946553.jpg" class="lazy" alt="How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? "> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312337917621.jpg" class="lazy" alt="How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? "> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312338030325.jpg" class="lazy" alt="How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? "> 2. JavaScript code: The spread() function receives the clicked image element as a parameter and calculates the displacement and scaling ratio of other images:

 function spread(img) {
  const images = document.getElementsByTagName('img');
  const index = Array.prototype.indexOf.call(images, img);
  for (let i = 0; i <p> In this code, <code>Math.sin</code> and <code>Math.cos</code> functions calculate the image displacement, <code>100</code> controls the scattering radius, and <code>scale</code> controls the scaling ratio. The clicked image has a scale of 2, and the other images remain as they are.</p><p> <strong>3. CSS style:</strong> Set the initial position, size and transition effect of the picture:</p><pre class="brush:php;toolbar:false"> img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.5s ease-in-out;
  /* Add other styles, such as image size*/
  width: 100px;
  height: 100px;
}

position: absolute enables the image to be absolutely positioned, translate(-50%, -50%) centers the image, and the transition attribute allows the image transformation process to smoothly transition.

Through the above steps, you can achieve the effect of scattering the surrounding pictures and enlarging them by themselves after clicking on them. You can fine-tune the effects by adjusting parameters in your code (such as spreading radius, scaling, transition time) and add more animation or interaction details to enhance the user experience. Remember to replace "image1.jpg" , "image2.jpg" and "image3.jpg" as your actual image path.

The above is the detailed content of How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?. For more information, please follow other related articles on the PHP Chinese website!