| Pahom | 10.11.2019 22:59 |
Да, это то что нужно! СПАСИБО!
Как сохранить начальную фоновую картинку, которая исчезает?
Как сохранить большую начальную фоновую картинку, которая исчезает после того как на ёё фоне появляется маленькая картинка?
Нормально появляется фоновая картинка "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, время: 12:10. |