Адаптивный баннер для сайта
22:36 7.09.2017
На форуме Товарища зашла речь о баннере, который должен быть адаптивным, то есть его размер должен быть подобран под ширину окна браузера. Я подумал, как это сделать, а сделать это оказалось совсем просто. Для этого нам нужно получить размер окна браузера, после загрузки страницы, так же надо получить ширину окна после изменения размера окна, в случаи, если пользователь будет изменять размер окна в ручную. Далее, используя полученный размер подбираем, какой размер должен быть у баннера.
Значит, я баннер вставляю в блок:
Теперь скрипт, который будет выполнять всю вышеописанную работу. Для понимания что к чему прокомментировал код:
Вот и все. Надеюсь данная информация была полезной.
Спасибо за внимание.
Значит, я баннер вставляю в блок:
<div id="banner"></div>
Теперь скрипт, который будет выполнять всю вышеописанную работу. Для понимания что к чему прокомментировал код:
window.onload = treatment; // Выполнение функции treatment() после загрузки документа
window.onresize = treatment; // Выполнение функции treatment() после изменения размера окна браузера
function treatment() {
var picture; // Создаем переменную
var html = document.documentElement; // Работаем с документом в целом
var breadth = html.clientWidth; // Получаем текущею ширину окна браузера
var banner = document.getElementById('banner'); // Работаем с элементом id = banner
var banners = [ // Создаем массив баннеров
'banner_0.gif',
'banner_1.gif',
'banner_2.gif',
'banner_3.gif'
];
// Подбираем соответствующий баннер под определенную ширину окна
if (600 > breadth) { // Если ширина окна менее 600 пикселей
picture = banners[0];
}
else if (800 > breadth && 600 < breadth) { // Если ширина окна от 600 до 800 пикселей
picture = banners[1];
}
else if (1000 > breadth && 800 < breadth) { // Если ширина окна от 800 до 1000 пикселей
picture = banners[2];
}
else { // Если заданный диапазон не найден
picture = banners[3];
};
banner.innerHTML = '<img src="' + picture + '">'; // Выводим картинку в элементе id = banner
};
Вот и все. Надеюсь данная информация была полезной.
Спасибо за внимание.
- Жалоба
8:56 8.09.2017
Только в Хроме? Только что перепроверил в Хроме, все отлично работает.
Чтобы понять, в чем проблема, необходимо больше информации, например, как вы это сделали, что в консоли браузера и так далее.
Покажите исходный код страницы, где у вас находится скрипт из первого сообщения. Скорее всего вы допустили ошибку.
Чтобы понять, в чем проблема, необходимо больше информации, например, как вы это сделали, что в консоли браузера и так далее.
Покажите исходный код страницы, где у вас находится скрипт из первого сообщения. Скорее всего вы допустили ошибку.