Адаптивный баннер для сайта

Раздел языка JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Адаптивный баннер для сайта

Сообщение Slash » Пн сен 12, 2016 7:40 pm

Здравствуйте.
На форуме Товарища зашла речь о баннере, который должен быть адаптивным, то есть его размер должен быть подобран под ширину окна браузера. Я подумал, как это сделать, а сделать это оказалось совсем просто. Для этого нам нужно получить размер окна браузера, после загрузки страницы, так же надо получить ширину окна после изменения размера окна, в случаи, если пользователь будет изменять размер окна в ручную. Далее, используя полученный размер подбираем, какой размер должен быть у баннера.

Значит, я баннер вставляю в блок:

Код: Выделить всё

<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
};

Вот и все. Надеюсь данная информация была полезной.
Спасибо за внимание.
Реклама
cefp
Сообщения: 333
Поблагодарили: 3 раза

Re: Адаптивный баннер для сайта

Сообщение cefp » Пн сен 12, 2016 9:18 pm

Slash, правильно ли я понял, что баннеры подгружаются по мере необходимости и подгружается только баннер нужного размера? То есть не получится ли так, что все баннеры, указанные в массиве, будут загружаться и это увеличит трафик пользователя.
d o h o d - s - n u l y a .ru - идеи бизнеса.
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: Адаптивный баннер для сайта

Сообщение Slash » Пн сен 12, 2016 9:26 pm

Да, Вы все правильно поняли.
Загружается только, то, что необходимо. Если размер браузера будет меняться пользователем, то новые банеры будут подгружаться, после того, как размер окна станет другим, если измененный размер окна попадет в один из диапазонов.

Вернуться в «JavaScript»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость