08.11.2019, 20:45
|
 |
Интересующийся
|
|
Регистрация: 08.11.2019
Сообщений: 10
|
|
|
Как сохранить начальную фоновую картинку, которая исчезает?
Как сохранить большую начальную фоновую картинку, которая исчезает после того как на ёё фоне появляется маленькая картинка?
Нормально появляется фоновая картинка "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>
Заранее благодарен тем, кто попытается мне помочь! )))
|
|
08.11.2019, 21:03
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Pahom,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
08.11.2019, 21:12
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
|
|
08.11.2019, 21:18
|
|
Интересующийся
|
|
Регистрация: 08.11.2019
Сообщений: 10
|
|
|
Спасибо!
|
|
08.11.2019, 21:38
|
|
Интересующийся
|
|
Регистрация: 08.11.2019
Сообщений: 10
|
|
|
Не вник в код, увидел, что запостили что-то красивое и поблагодарил. Потом отвлёк реал. А вернувшись к компу лишний раз убедился, что лучшее - враг хорошего. Да, мой код был не гламурный и не кавайный, но он работал одинаково и в IE и в Mozile. А этот причёсанный точно так же работает в мозиле (то есть продвижение по сабжу - нулевое), а под IE не выводит мелкие картинки. Так что прошу не обращать внимания на отформатированный код, бо он нетолерантным к IE оказался (а меня как раз IE больше всего интересует), а помочь мне в первоначальным вариантом. Он хотя и не построен, как рядовые перед генералом, но хотя бы почти рабочий и всего с одним изъяном (а нижний с двумя).
Продолжаю ждать следующих комментов...
|
|
08.11.2019, 22:19
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Pahom,
|
Сообщение от Pahom
|
|
А хотелось бы, чтобы и эта маленькая картинка и последующие маленькие картинки, которые меняются в цикле, не убивали бы фон (или хотя бы полностью не убивали).
|
что такое фон?
|
|
08.11.2019, 22:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
|
|
08.11.2019, 22:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
|
|
09.11.2019, 12:23
|
|
Интересующийся
|
|
Регистрация: 08.11.2019
Сообщений: 10
|
|
|
"что такое фон?" - это та самая самоя большая по размеру картинка, в левом верхнем углу которой, должны в цикле на короткое время появляться маленькие картиночки, частично заслоняя эту большую картинку. Но большая часть большой картинки должна (ну хочу так сделать!) остаться неизменной и не исчезать. Я сейчас в профиле с англоязычной мозилой (русскоязычную нельзя ставить, т.к. в неё принудительно шпионский яндекс внедрили) и в нём больше ничего нет. Нет CodeLobsterа, нет KomodoIDE, нет EmEditorа и других инструментов, к которым я привык. Когда буду в моём привычном профиле с привычными инструментами и комфортной русскоязычной средой (ненавижу пендосов) посмотрю новые варианты. Но это не скоро - есть дела в этом профиле. Однако БОЛЬШОЕ СПАСИБО за Помощь! )))
|
|
09.11.2019, 14:21
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от Pahom
|
|
русскоязычную нельзя ставить, т.к. в неё принудительно шпионский яндекс внедрили
|
?! |
|
|
|
