Question

我正在尝试将每个图像的transform translate X value增加50。我能够用宽度做到这一点。无论如何，我可以使用transform translate X value

预期结果：

transform="translate(64.5,0)
transform="translate(114.5,0)
transform="translate(164.5,0)

这是我增加每个宽度的代码：

HTML：

<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">

Javascript / jQuery：

$('.what-can-we-do-tash').css('width', function(i){
   return $(this).width() + (i * 50);
});

我可以为transform translate值做类似的事情吗。

Answer 1

这应该做到：

$('.what-can-we-do-tash').css('transform', function(i, s) {
   return s.replace(/(\d+)(\.\d+)?(, ?\d+\))/, (s, t, u, v) => `${parseFloat(t + u) + 50 * (i + 1)}${v}`)
});

.what-can-we-do-tash {
  transform: translate(100.5px ,0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">

将变换属性的X值各增加50

1 个答案: