Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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%
Всем спасибо за участие.
Ответить с цитированием
  #2 (permalink)  
Старый 25.02.2024, 09:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

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>
Ответить с цитированием
  #3 (permalink)  
Старый 25.02.2024, 10:08
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 80

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Показ картинки при наведении lnsider Общие вопросы Javascript 0 01.12.2014 14:58
Подмена картинки при клике ameganix Элементы интерфейса 2 09.10.2014 19:57
Разделение на 3 картинки и их открытие при наведении курсора Михаил_Michail Элементы интерфейса 1 07.07.2014 12:11
Анимация gif картинки при нажатии на ссылку ainur777 Общие вопросы Javascript 2 06.07.2014 16:23
Изменение картинки при ховере на ссылку DImaN Общие вопросы Javascript 0 25.12.2008 12:13