Форум

III · #1 (**permalink**) 25.02.2024, 09:14

Всем привет. Имею скрипт:

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%
Всем спасибо за участие.

рони · #2 (**permalink**) 25.02.2024, 09:52

III,

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <style type="text/css">
        .kartink {
            position: relative;
            width: 400px;
            height: 400px;
        }

        .kartink img {
            position: absolute;
            transform: scale(var(--scale, 1));
        }
    </style>
</head>

<body>
    <div class="kartink">
        <img>
    </div>
    <script>
        const flower = [{
                src: "https://habrastorage.org/webt/ro/xv/b8/roxvb8fy1dml_inxatpcqwopgl8.jpeg",
                imgpos: [140, 40],
                scale: .5

            },
            {
                src: "https://habrastorage.org/webt/ro/xv/b8/roxvb8fy1dml_inxatpcqwopgl8.jpeg",
                imgpos: [40, 80],
                scale: .3
            },
            {
                src: "https://habrastorage.org/webt/ro/xv/b8/roxvb8fy1dml_inxatpcqwopgl8.jpeg",
                imgpos: [40, 180],
                scale: .7
            },
            {
                src: "https://habrastorage.org/webt/ro/xv/b8/roxvb8fy1dml_inxatpcqwopgl8.jpeg",
                imgpos: [40, 40],
                scale: .25
            }
        ];

        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;
                Object.assign(img.style, {
                    top: `${f.imgpos[0]}px`,
                    left: `${f.imgpos[1]}px`,
                    opacity: 1,
                })
                img.style.setProperty("--scale", f.scale);
                await delay(2500);
            }
            img.style.display = 'none';
        }
        cycle();
    </script>
</body>

</html>

III · #3 (**permalink**) 25.02.2024, 10:08

Огромное спасибо,
рони ! Как всегда выручил, быстро и толково.

Форум

Справочник

Discord чат

Курсы javascript