Резиновый фон при помощи jQuery

Этот урок понравится тем, кто привык делать резиновые сайты! Тут вы научитесь создавать резиновый фон, который будет меняться в зависимости от размеров экрана пользователя.

Код

В первую очередь нам необходимо поместить изображение на страницу, и назначить ему id ‘background-image’.

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

Используя jQuery мы можем манипулировать размерами изображения посредством правил CSS:

$(document).ready(function() {

 var bgImage = $('#background-image');      

    function resizeImg() {
      var imgwidth = bgImage.width(),
           imgheight = bgImage.height(),
           winwidth = $(window).width(),
           winheight = $(window).height(),
           widthratio = winwidth / imgwidth,
           heightratio = winheight / imgheight,
           widthdiff = heightratio * imgwidth,
           heightdiff = widthratio * imgheight;

      if(heightdiff>winheight) {
        bgImage.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImage.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });
      }

     $("#background-image").show();

    }
    resizeImg();
    $(window).resize(function() {
      resizeImg();
    }); 

});

CSS вдобавок

Для того чтобы изображение находилось позади всего остального контента, нам необходимо абсолютно его спозиционировать и выставить наименьший z-index. Вы так же увидите, что свойство display выставлено в none. Это для тех, кто отключает JavaScript. Раз они такие нехорошие, то пусть у них ничего не отображается!

#background-image {
    position:absolute;
    top:0;
    left:0;
    z-index:-10;
    overflow: hidden;
    width: 100%;
    display:none;
}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/0LH50TVyVz8/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Резиновый фон при помощи jQuery | | 2012-06-19 12:10:13 | | Статьи Web-мастеру | | Этот урок понравится тем, кто привык делать резиновые сайты! Тут вы научитесь создавать резиновый фон, который будет меняться в зависимости от размеров экрана пользователя.КодВ первую очередь нам | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: