Увеличьте каждое значение X преобразования attr на 50 - PullRequest
Новая
       32

Увеличьте каждое значение X преобразования attr на 50

0 голосов
/ 14 декабря 2018

Я пытаюсь увеличить 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.

1 Ответ

0 голосов
/ 15 декабря 2018

Это должно сделать это: 

$('.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">
...