点击图片怎么实现周围图片以任意半径散开自身放大？

Question

大佬求解呀，点击图片的时候周围的图片要自动散开，怎么才能实现呀

Answer 1

要实现这个效果，可以使用 CSS3 中的 transform 属性和 JavaScript 来实现。

首先，需要给每张图片添加一个点击事件监听器，当点击图片时，触发 JavaScript 代码执行。在 JavaScript 代码中，可以使用 transform 属性来分别控制每张图片的位置和大小，从而实现周围图片以任意半径散开自身放大的效果。

具体实现步骤如下：

给每张图片添加一个点击事件监听器，代码如下：

<img src="image1.jpg" onclick="spread(this)">
<img src="image2.jpg" onclick="spread(this)">
<img src="image3.jpg" onclick="spread(this)">
<!-- ... 其他图片 -->

在 JavaScript 中定义 spread 函数，代码如下：

function spread(img) {
  // 获取所有图片
  var images = document.getElementsByTagName('img');
  // 获取点击的图片在所有图片中的索引
  var index = Array.prototype.indexOf.call(images, img);
  // 计算每张图片的位置和大小
  for (var i = 0; i < images.length; i++) {
    var x = Math.sin((i - index) * Math.PI / (images.length - 1)) * 100;
    var y = Math.cos((i - index) * Math.PI / (images.length - 1)) * 100;
    var scale = (i == index) ? 2 : 1;
    // 设置图片的位置和大小
    images[i].style.transform = 'translate(' + x + 'px, ' + y + 'px) scale(' + scale + ')';
  }
}

在 CSS 中设置图片的初始位置和大小，代码如下：

img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.5s ease-in-out;
}

在上面的代码中，translate(-50%, -50%) 是为了让图片居中显示，transition: transform 0.5s ease-in-out 是为了让图片变换时有过渡效果。

通过上面的代码，就可以实现点击图片周围图片以任意半径散开自身放大的效果了。