Question

我有宝丽来画廊图像风格。但我想要的是当我点击图像时，它会放大或放大图像。

我不知道如何在text声明中实现它。当我点击图片时，我试图将其翻转，它的工作原理如下：

else

的JavaScript ：

.photo.flipped .side-front {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.photo.flipped .side-back {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  transform: rotateY(0);
}

这是我的 CSS ：

item.addEventListener('click', function () {
  if ((currentData != dataSize[item.id]) || (currentData == null)) {
    select(dataSize[item.id]);
    shuffleAll();
  } else {
    /*Paul Zoom In Photo*/
    item.classList.contains('zoomed') === true ? item.classList.remove('zoomed') : item.classList.add('zoomed');
    /*END*/
  }
});

Answer 1

如上所述，一种方法是使用transform: scale(2);

另一个简单的方法是：

document.querySelector('img.sample-image').addEventListener('click', function() {
    this.classList.toggle('sample-image-large');
});

.sample-image {
    transition:all 1s ease;
    width: 100%;
}

.sample-image-large {
    width: 200% !important;
}

  <img src="http://c.s-microsoft.com/en-us/CMSImages/Explore_ShareBG_0330_1600x560_EN_US.jpg?version=19f9bdc2-cbab-929d-bd00-48f537b9f7e8" class="sample-image">

放大图片（JavaScript）

1 个答案: