Javascript.RU

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

Как исправить появление лишней картинки?
Делаю анимационную открытку к юбилею друга-рыбака. Проблема в том, что после показа нужных картинок (картинки фраз с вставленным в них текстом), на экране, слева внизу, появляется лишняя картинка, изображающая фразы. Подскажите как исправить данную проблему.
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();

Файл представил.
Вложения:
Тип файла: zip 123.zip (5.56 Мб, 1 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 10.02.2024, 14:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

III,
если надо поменять свойство стиля, то не надо стирать все остальные свойства. строки с opacity 133 и 151 соответственно.
img.style.opacity =  '0'
img.style.opacity =  '1'
Ответить с цитированием
  #3 (permalink)  
Старый 10.02.2024, 14:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

III,
если не сработает, все строки с img.style = выкинуть и заменить на img.style.свойство1 = ""; img.style.свойство2 = "";img.style.свойство3 = "";
Ответить с цитированием
  #4 (permalink)  
Старый 10.02.2024, 14:37
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 78

Спасибо буду пробовать.
Ответить с цитированием
  #5 (permalink)  
Старый 10.02.2024, 17:35
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 78

Огромное спасибо РОНИ в 151 строке поставил img.style.opacity = '0' и всё сработало нормально.
Ответить с цитированием
  #6 (permalink)  
Старый 10.02.2024, 22:39
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,702

Так не будет рыб, плещущихся после фраз.
Если они не нужны, так вообще убрать строки 151-157.
Ответить с цитированием
  #7 (permalink)  
Старый 11.02.2024, 10:27
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 78

Да вроде бы нет, всё появляется. вот файл. Есть возможность улучшить, подскажите как, я в JS лопух. Все рыбки нужны.
Вложения:
Тип файла: zip Андрюха ДР JS.zip (5.24 Мб, 0 просмотров)

Последний раз редактировалось III, 11.02.2024 в 11:18.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Dreamweaver CS5.5 и ООП. Не выводит подсказки методов. Как можно исправить? jsuse Общие вопросы Javascript 3 23.03.2012 19:57
.mouseover тормозит в Mozilla. Как исправить? denisOgr jQuery 1 30.08.2011 15:13
Появление картинки и области-ссылки на ней John Общие вопросы Javascript 4 08.05.2008 00:41