Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как исправить появление лишней картинки? (https://javascript.ru/forum/misc/85750-kak-ispravit-poyavlenie-lishnejj-kartinki.html)

III 10.02.2024 13:55

Как исправить появление лишней картинки?
 
Вложений: 1
Делаю анимационную открытку к юбилею друга-рыбака. Проблема в том, что после показа нужных картинок (картинки фраз с вставленным в них текстом), на экране, слева внизу, появляется лишняя картинка, изображающая фразы. Подскажите как исправить данную проблему.
const frazas = [
    {src: "pictures/Fraza_L.png",  
    imgpos: [180, 516],  
    text: "Час сидим<br> клёва нет.",   
    textpos: [208, 545]
    },            
    {src: "pictures/Fraza_P.png",  
    imgpos: [172, 739],  
    text: "Непруха <br> сегодня. ",   
    textpos: [200, 770]
    },                       
     {src: "pictures/Fraza_P.png",  
    imgpos: [165, 871],  
    text: "С клёвом <br> тишина.",  
    textpos: [195, 895]
    },      
   {src: "pictures/Fraza_L.png",  
    imgpos: [180, 516],  
    text: "Вот и Андрюха<br> на горизонте!",   
    textpos: [205, 528]
    },
    {src: "pictures/Fraza_P.png",  
    imgpos: [172, 739],  
    text: "Андрюха <br> клёва нет!",   
    textpos: [200, 770]
    },                       
     {src: "pictures/Fraza_P.png",  
    imgpos: [165, 871],  
    text: "Клевать <br> не будет!",  
    textpos: [195, 895]
    },
     {src: "pictures/Fraza_L.png",  
    imgpos: [180, 516],  
    text: "У Андрюхи<br> жор начался!",   
    textpos: [205, 528]
    },
    {src: "pictures/Fraza_P.png",  
    imgpos: [172, 739],  
    text: "Во попёрло!!!",   
    textpos: [208, 755]
    },                       
     {src: "pictures/Fraza_P.png",  
    imgpos: [165, 871],  
    text: "Нам бы так!",  
    textpos: [206, 889]
    },

    {src: "pictures/Fraza_L.png",  
    imgpos: [180, 516],  
    text: "Сойди!!! <br> Сойди!!!",   
    textpos: [205, 528]
    },
    {src: "pictures/Fraza_P.png",  
    imgpos: [172, 739],  
    text: "У него <br> не сойдёт.",   
    textpos: [208, 755]
    },                       
     {src: "pictures/Fraza_P.png",  
    imgpos: [165, 871],  
    text: "Чем кормил?",  
    textpos: [206, 889]
    },
    {src: "pictures/Fraza_L.png",  
    imgpos: [180, 516],  
    text: "На что ловишь?",   
    textpos: [205, 528]
    },
    {src: "pictures/Fraza_P.png",  
    imgpos: [172, 739],  
    text: "Продай секрет.",   
    textpos: [208, 755]
    },                       
     {src: "pictures/Fraza_P.png",  
    imgpos: [165, 871],  
    text: "Ставлю литр!!!",  
    textpos: [206, 889]
    },
      {src: "pictures/Fraza_L.png",  
    imgpos: [180, 516],  
    text: "Рука не устала?",   
    textpos: [205, 528]
    },
    {src: "pictures/Fraza_P.png",  
    imgpos: [172, 739],  
    text: "Оставь <br> на завтра.",   
    textpos: [208, 755]
    },                       
     {src: "pictures/Fraza_P.png",  
    imgpos: [165, 871],  
    text: "Завтра ведро <br> побольше.",  
    textpos: [206, 889]
    },                                            
];
 
const fishImages = [
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
];
 
const fishImages_1 = [
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
     {src: "pictures/Karas_P.gif", pos: [330, 600]},

];


 
const img = document.querySelector('.fraza img');
const txt = document.querySelector('.fraza b');
 
const delay = (t) => new Promise (r => setTimeout(r, t))
 
async function cycle () {  
    await delay(4500);
    for (let f of fishImages) {
        img.src = f.src;
        img.style = `top: ${f.pos[0]}px; left: ${f.pos[1]}px;`
        await delay(4500);
    }
	img.style = 'opacity: 0;'  
await delay(6500);
    for (let f of frazas) {
        img.src = f.src;
        img.style = `top: ${f.imgpos[0]}px; left: ${f.imgpos[1]}px; opacity: 1;`
        txt.innerHTML = f.text
        txt.style = `top: ${f.textpos[0]}px; left: ${f.textpos[1]}px; opacity: 1;`
        await delay(3000);
        img.style = `top: ${f.imgpos[0]}px; left: ${f.imgpos[1]}px; opacity: 0;`
        txt.innerHTML = f.text
        txt.style = `top: ${f.textpos[0]}px; left: ${f.textpos[1]}px; opacity: 0;`
        await delay(1500);
    }

    txt.textContent = '';    
    img.style.display = 'none';  
 
 
	img.style = 'opacity: 1;'  
    await delay(4500);
    for (let f of fishImages_1) {
        img.src = f.src;
        img.style = `top: ${f.pos[0]}px; left: ${f.pos[1]}px;`
        await delay(4500);
    }

}
 
cycle();

Файл представил.

рони 10.02.2024 14:24

III,
если надо поменять свойство стиля, то не надо стирать все остальные свойства. строки с opacity 133 и 151 соответственно.
img.style.opacity =  '0'
img.style.opacity =  '1'

рони 10.02.2024 14:32

III,
если не сработает, все строки с img.style = выкинуть и заменить на img.style.свойство1 = ""; img.style.свойство2 = "";img.style.свойство3 = "";

III 10.02.2024 14:37

Спасибо буду пробовать.

III 10.02.2024 17:35

Огромное спасибо РОНИ в 151 строке поставил img.style.opacity = '0' и всё сработало нормально.

voraa 10.02.2024 22:39

Так не будет рыб, плещущихся после фраз.
Если они не нужны, так вообще убрать строки 151-157.

III 11.02.2024 10:27

Да вроде бы нет, всё появляется. вот файл. Есть возможность улучшить, подскажите как, я в JS лопух. Все рыбки нужны.


Часовой пояс GMT +3, время: 22:30.