Как сохранить начальную фоновую картинку, которая исчезает?
Как сохранить большую начальную фоновую картинку, которая исчезает после того как на ёё фоне появляется маленькая картинка?
Нормально появляется фоновая картинка "https://mdn.github.io/dom-examples/streams/png-transform-stream/png-logo.png" (Это для примера). Но как только выводится маленткая картинка "https://js.pngtree.com/v3/images/home/paradrop.png" - фоновая картинка исчезает бесследно. А хотелось бы, чтобы и эта маленькая картинка и последующие маленькие картинки, которые меняются в цикле, не убивали бы фон (или хотя бы полностью не убивали). Полный текст программы: <html> <head> <title>Программа приветствия</title> </head> <body> <script type="text/javascript"> (function(i) { window.setInterval( function() { var element = document.getElementById('img'); images = ['https://js.pngtree.com/v3/images/home/paradrop.png', 'https://img.pngio.com/instagram-logo-png-images-instagram-logo-clipart-free-download-instagramlogo-png-310_308.jpg', 'https://www.pngarts.com/files/3/Light-PNG-Image-Background.png', 'https://png.pngtree.com/png-clipart/20190929/ourmid/pngtree-creative-irregular-solid-graphic-text-box-png-image_1755152.jpg'], j = images.length; ++i < j ? element.src = images[i] : i = -1; }, 1500); }(-1)); </script> <img src="https://mdn.github.io/dom-examples/streams/png-transform-stream/png-logo.png" alt="" id="img" /> </body> </html> Заранее благодарен тем, кто попытается мне помочь! ))) |
Pahom,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Pahom,
<html>
<head>
<title>Программа приветствия</title>
</head>
<body>
<script type="text/javascript">
addEventListener('load', () => {
let element = document.getElementById('img');
images = ['https://js.pngtree.com/v3/images/home/paradrop.png',
'https://img.pngio.com/instagram-logo-png-images-instagram-logo-clipart-free-download-instagramlogo-png-310_308.jpg',
'https://www.pngarts.com/files/3/Light-PNG-Image-Background.png',
'https://png.pngtree.com/png-clipart/20190929/ourmid/pngtree-creative-irregular-solid-graphic-text-box-png-image_1755152.jpg'],
j = images.length, i = 0,
show = () => {i = ++i % j; element.src = images[i]; setTimeout(show, 1500)};
show();
})
</script>
<img src="https://mdn.github.io/dom-examples/streams/png-transform-stream/png-logo.png" alt="" id="img" />
</body>
</html>
|
Спасибо!
|
Не вник в код, увидел, что запостили что-то красивое и поблагодарил. Потом отвлёк реал. А вернувшись к компу лишний раз убедился, что лучшее - враг хорошего. Да, мой код был не гламурный и не кавайный, но он работал одинаково и в IE и в Mozile. А этот причёсанный точно так же работает в мозиле (то есть продвижение по сабжу - нулевое), а под IE не выводит мелкие картинки. Так что прошу не обращать внимания на отформатированный код, бо он нетолерантным к IE оказался (а меня как раз IE больше всего интересует), а помочь мне в первоначальным вариантом. Он хотя и не построен, как рядовые перед генералом, но хотя бы почти рабочий и всего с одним изъяном (а нижний с двумя).
Продолжаю ждать следующих комментов... |
Pahom,
Цитата:
|
Pahom,
а пока всё тоже самое для всех браузеров
<html>
<head>
<title>Программа приветствия</title>
</head>
<body>
<script type="text/javascript">
addEventListener('load', function(){
var element = document.getElementById('img');
images = ['https://js.pngtree.com/v3/images/home/paradrop.png',
'https://img.pngio.com/instagram-logo-png-images-instagram-logo-clipart-free-download-instagramlogo-png-310_308.jpg',
'https://www.pngarts.com/files/3/Light-PNG-Image-Background.png',
'https://png.pngtree.com/png-clipart/20190929/ourmid/pngtree-creative-irregular-solid-graphic-text-box-png-image_1755152.jpg'],
j = images.length, i = 0,
show = function(){i = ++i % j; element.src = images[i]; setTimeout(show, 1500)};
show();
})
</script>
<img src="https://mdn.github.io/dom-examples/streams/png-transform-stream/png-logo.png" alt="" id="img" />
</body>
</html>
|
Pahom,
вариант как я понимаю, что такое фон
<html>
<head>
<title>Программа приветствия</title>
<style type="text/css">
html, body{
height: 100%;
}
body{
background-image: url(https://mdn.github.io/dom-examples/streams/png-transform-stream/png-logo.png);
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<script type="text/javascript">
addEventListener('load', function(){
var element = document.getElementById('img');
images = ['https://js.pngtree.com/v3/images/home/paradrop.png',
'https://img.pngio.com/instagram-logo-png-images-instagram-logo-clipart-free-download-instagramlogo-png-310_308.jpg',
'https://www.pngarts.com/files/3/Light-PNG-Image-Background.png',
'https://png.pngtree.com/png-clipart/20190929/ourmid/pngtree-creative-irregular-solid-graphic-text-box-png-image_1755152.jpg'],
j = images.length, i = 0,
show = function(){i = ++i % j; element.src = images[i]; setTimeout(show, 1500)};
show();
})
</script>
<img id="img" />
</body>
</html>
|
"что такое фон?" - это та самая самоя большая по размеру картинка, в левом верхнем углу которой, должны в цикле на короткое время появляться маленькие картиночки, частично заслоняя эту большую картинку. Но большая часть большой картинки должна (ну хочу так сделать!) остаться неизменной и не исчезать. Я сейчас в профиле с англоязычной мозилой (русскоязычную нельзя ставить, т.к. в неё принудительно шпионский яндекс внедрили) и в нём больше ничего нет. Нет CodeLobsterа, нет KomodoIDE, нет EmEditorа и других инструментов, к которым я привык. Когда буду в моём привычном профиле с привычными инструментами и комфортной русскоязычной средой (ненавижу пендосов) посмотрю новые варианты. Но это не скоро - есть дела в этом профиле. Однако БОЛЬШОЕ СПАСИБО за Помощь! )))
|
Цитата:
|
| Часовой пояс GMT +3, время: 18:21. |