Показать сообщение отдельно
  #1 (permalink)  
Старый 25.02.2024, 09:14
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 80

Масштабирование картинки при показе в разных координатах.
Всем привет. Имею скрипт:
const flower = [
    {src: "https://habrastorage.org/webt/ro/xv/b8/roxvb8fy1dml_inxatpcqwopgl8.jpeg",  
    imgpos: [140, 40],  
    },            
    {src: "https://habrastorage.org/webt/ro/xv/b8/roxvb8fy1dml_inxatpcqwopgl8.jpeg",  
    imgpos: [40, 80],     
    },            
    {src: "https://habrastorage.org/webt/ro/xv/b8/roxvb8fy1dml_inxatpcqwopgl8.jpeg",  
    imgpos: [40, 180],  
    },            
    {src: "https://habrastorage.org/webt/ro/xv/b8/roxvb8fy1dml_inxatpcqwopgl8.jpeg",  
    imgpos: [40, 40],  
    },            
];
 
const img = document.querySelector('.kartink img');

const delay = (t) => new Promise (r => setTimeout(r, 1500));
 
async function cycle () {
    await delay(2500);
    for (let f of flower) {
       img.src = f.src;
       img.style = `position:absolute;top:${f.imgpos[0]}px; left:${f.imgpos[1]}px;opacity: 1;`
      await delay(2500);    
    }           
    img.style.display = 'none'; 
}
cycle();


Код:
<div  class ="kartink">
  <img>
</div>
Знаю что масштабирование осуществляется с помощью transform: scale(), но не знаю как тут в скрипте это применить.
Надо чтобы при разных показах менялся масштаб картинки. Примерно так:
- первый показ 50%
- второй 30%
- третий 70%
-четвертый 25%
Всем спасибо за участие.
Ответить с цитированием