我想在SCSS中创建以下布局:
由于图片具有动态编号,因此它可以是4,5或2张图片,因此我无法对负数top或translateY
属性进行硬编码。所以我需要在SCSS中使用foreach
循环,以便为这些图像分配不同的顶部。是否可以在SCSS中创建这样的布局,还是我需要使用JS?
这就是我目前拥有的,正如您所看到的,我只能移动第二个元素,而第三个元素已经translateY(-100%)
.layers__img {
position: relative;
top: 0;
}
.layers__img:not(:first-child) {
transform: translateY(-50%);
transition: transform 0.5s ease-in;
}
<div class="layers">
<div class="layers__img" id="layer-1">
<img src="https://placeimg.com/640/480/any">
</div>
<div class="layers__img" id="layer-2">
<img src="https://placeimg.com/640/480/any">
</div>
<div class="layers__img" id="layer-3">
<img src="https://placeimg.com/640/480/any">
</div>
</div>
最佳答案
请在下面尝试:
let layers = $('.layers__img');
$.each( layers, function( key, value ) {
var percent = 50;
if(key != 0) {
$('img',value).css('transform', 'translateY(-'+percent * key+'%)');
}
});
.layers__img {
position: relative;
top: 0;
}
.layers__img:not(:first-child) {
transition: transform 0.5s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="layers">
<div class="layers__img" id="layer-1">
<img src="https://placeimg.com/640/480/any" width="100px">
</div>
<div class="layers__img" id="layer-2">
<img src="https://placeimg.com/640/480/any" width="100px">
</div>
<div class="layers__img" id="layer-3">
<img src="https://placeimg.com/640/480/any" width="100px">
</div>
<div class="layers__img" id="layer-3">
<img src="https://placeimg.com/640/480/any" width="100px">
</div>
<div class="layers__img" id="layer-3">
<img src="https://placeimg.com/640/480/any" width="100px">
</div>
</div>
关于javascript - 在SCSS中动态堆叠图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56833669/