Вы находитесь здесь:Пользовательские скрипты»Показать содержимое по тегу: Background jQuery - MASS CODE

liFullSize - jQuery fullscreen background или фон на весь экран на jQuery

Понедельник, 12 Ноябрь 2012 01:24
Опубликовано в Плагины jQuery

Плагин liFullSize подгоняет изображение под размеры окна браузера, не искажая его пропорций. При этом изображение всегда будет занимать весь экран.
liFullSize максимально упрощает выполнение этой задачи так как очень прост в подключении и весит всего 1kb

Подключаемые файлы

Подключаем CSS "liFullSize"


Подключаем библиотеку "jQuery" и плагин "liFullSize":





Структура HTML

Вставляем в HTML изображение и присваиваем ему любое имя класса


    <img class="fullsize" src="/pic/img1.jpg">
    

Инициализация плагина

Остается только скормить плагину "liFullSize" нашу картинку. Так как работаем с изображением и обязаны дождаться его полной загрузки, то делаем это через событие "$(window).load()"

$(function(){
  $(window).load(function(){
    $('.fullsize').liFullSize()
  })
});

CSS

Подключаемый CSS плагина содержит всего две строчки. В него вынесены параметры элементов, которые, возможно прийдется изменять, в зависимости от особенности использования плагина.

.fullsize { z-index:-999}
.fullsizeWrap { position:fixed;z-index:-999}

JAVASCRIPT

Зарываемся внутрь файла "jquery.liFullSize.js" и разбираем особые моменты

(function ($) {
  $.fn.liFullSize = function () {
    return this.each(function () {
      var
      /*
      Изображение может выходить за пределы экрана, 
      поэтому окружаем его дополнительным элементом
      со свойством "overflow:hidden"
      */
      elWrap = $('<div>').addClass('fullsizeWrap')
        .css({
        left: '0',
        top: '0',
        width: '100%',
        height: '100%',
        overflow: 'hidden'
      }),
        el = $(this).css({
          position: 'absolute'
        }).wrap(elWrap),
        /*
        Определяем реальную высоту и ширину изображения.
        Для этого делаем его клон, чистим этот клон от параметров, 
  влияющих на размеры,
        и вставляем его в код. 
        Высоту и ширину считываем уже именно с клона.
        */
        elClone = el.clone().css({
          left: '-9999px',
          top: '-9999px'
        }).appendTo('body'),
        elCloneW = elClone.width(),
        elCloneH = elClone.height(),
        wW = $(window).width(),
        wH = $(window).height(),
        /*
        И все это для того чтобы определить коэффициент пропорциональности (КП)
        */
        elFactor = elCloneW / elCloneH,
        wFactor = wW / wH,
        fullSizeFunc = function () {
          /*
          А тут уже смотрим на разницу КП изображения и КП окна браузера
          */
          if (elFactor < wFactor){
            /*
            Подгоняем высоту изображения под его ширину учитывая КП
            */
            var
            elH = wW / elFactor,
              elTop = (elH - wH) / 2;
            el.css({
              width: wW,
              height: elH,
              top: -elTop,
              left: '0'
            });
          } else {
            /*
            Подгоняем ширину изображения под его высоту учитывая КП
            */
            var
            elW = wH * elFactor,
              elLeft = (elW - wW) / 2;
            el.css({
              height: wH,
              width: elW,
              left: -elLeft,
              top: '0'
            });
          }
        };
      elClone.remove();
      fullSizeFunc();
      /*
      Для любителей поиграть с размерами окошка браузера 
      происходит мгновенный пересчет всех параметров
      */
      $(window).on('resize', function () {
        wW = $(window).width();
        wH = $(window).height();
        wFactor = wW / wH;
        fullSizeFunc();
      });
    });
  };
})(jQuery);

Пример работы на JSFIDDLE

Вопрошайничай!

Чем вы можете помочь?

1. Разместить ссылку на своем сайте
Если вы ведете блог или у вас есть сайт - поставьте ссылку на www.masscode.ru. Скопируйте этот код:

<a href="/" title="Плагины, сниппеты и пользовательские скрипты на jquery" target="_blank">Плагины, сниппеты и пользовательские скрипты на jquery</a>

2. Поддержать проект финансово
Вы можете сделать добровольное пожертвование

AUH: U878157792792
USD: Z821422743261
RUB: R360648948582
EUR: E298388086680
410011708836205

Свежие jQuery скрипты

Последние коментарии

Календарь статей

« Январь 2013 »
Пн Вт Ср Чт Пт Сб Вс
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
Вы находитесь здесь:   ГлавнаяПользовательские скриптыПоказать содержимое по тегу: Background jQuery