更改产品视图时单击拉伸动画

Question

带有动画的视频

如何使用css和js实现类似的效果？我提出了一个想法，每个主框中应该有3个图像(前一个、当前和下一个项目的图像(。我甚至创建了这样的布局，但当我点击更改产品的按钮时，我完全不知道如何获得这样的动画。我的布局

编辑：我添加了我创建的html代码。我现在已经用JS编写了单独的产品开关，所以我不会在这里发布它。

.post_gallery {
position: relative;
height: 500px;
}
.post_gallery .gallery_item {
position: absolute;
}
.post_gallery .gallery_item {
top: 50%;
transform: translateY(-50%);
}
.post_gallery .gallery_item:first-child {
z-index: 0;
}
.post_gallery .gallery_item:nth-child(2){
left: 200px;
z-index: -1;
}
.post_gallery .gallery_item:nth-child(3){
left: 380px;
z-index: -2;
}
.post_gallery .gallery_item:last-child{
left: 540px;
z-index: -3;
}
.post_gallery .gallery_item .gallery_image a {
display: block;
}
.post_gallery .gallery_item:first-child .gallery_image a,
.post_gallery .gallery_item:first-child .gallery_image a img{
height: 500px;
width: 400px;
}
.post_gallery .gallery_item:nth-child(2) .gallery_image a,
.post_gallery .gallery_item:nth-child(2) .gallery_image a img{
height: 450px;
width: 360px;
}
.post_gallery .gallery_item:nth-child(3) .gallery_image a,
.post_gallery .gallery_item:nth-child(3) .gallery_image a img{
height: 400px;
width: 320px;
}
.post_gallery .gallery_item:last-child .gallery_image a,
.post_gallery .gallery_item:last-child .gallery_image a img{
height: 350px;
width: 280px;
}
.post_gallery .gallery_item .gallery_image a img{
position: absolute;
top: 0;
left: 0;
background-color: blue;
}
.post_gallery .gallery_item .gallery_image a img:first-child{
background-color: red;
}
.post_gallery .gallery_item .gallery_image a img:nth-child(2){
background-color: blue;
z-index: 1;
}
.post_gallery .gallery_item .gallery_image a img:last-child{
background-color: green;
}

<div class="gallery">
<div class="post_gallery">
<div class="gallery_item">
<div class="gallery_image">
<a href="/product1" title="Product 1">
<img src="../img/slide-4.png" />
<img src="../img/Slide-1.png" />
<img src="../img/slide-2.png" />
</a>
</div>
</div>
<div class="gallery_item">
<div class="gallery_image">
<a href="/product2" title="Product 2">
<img src="../img/Slide-1.png" />
<img src="../img/Slide-2.png" />
<img src="../img/Slide-3.png" />
</a>
</div>
</div>
<div class="gallery_item">
<div class="gallery_image">
<a href="/product3" title="Product 3">
<img src="../img/Slide-2.png" />
<img src="../img/Slide-3.png" />
<img src="../img/Slide-4.png" />
</a>
</div>
</div>
<div class="gallery_item">
<div class="gallery_image">
<a href="/product4" title="Product 4">
<img src="../img/Slide-3.png" />
<img src="../img/Slide-4.png" />
<img src="../img/Slide-1.png" />
</a>
</div>
</div>
</div>
<div class="controllers">
<button type="button" class="active"></button>
<button type="button"></button>
<button type="button"></button>
<button type="button"></button>
<button type="button"></button>
</div>
</div>

Answer 1

这个问题没有正确的答案，但如果你遵循以下步骤，你应该完成你正在尝试的：

1. 通过确保所有盒子都相同来简化纵横比。这样你就可以很容易地调整图像的大小
2. 指定<img>标记的ID
3. 确保设置了overflow: hidden;。这样，框中没有偏移的内容将不可见
4. 将框中的第一个图像设置为margin-left: 0%;，将第二个图像设置成margin-left: 100%，将第三个图像设置到margin-left: 200%;。由于隐藏溢出，这将隐藏另外两个图像
5. 编写Javascript代码更改用户点击时的边距，将框中的第一项调整为margin-left: -100%;，第二项调整为margin-left: 0%;，依此类推

您可以检查<img>是否有margin-left: 0%;，如果有，您可以在单击时将每个具有该值的<img>设置为margin-left: -100%;。一定要将每个<img>和margin-left:-100%移动到margin-left: 100%，使其绕一圈。可以使用getComputedStyle()检查样式。