UniSite CMS - Современный движок для Ваших сайтов.

ZHUR ARTUR.ru

Персональный блог по созданию
мощных и современных Web-Проектов!

Счастье - это когда в доме, в постели и в голове - один и тот же человек. © Жизнь

»

Введите код полученный после подписки

  • 5

  • 0

Смена фона сайта с помощью Jquery

Автор - Жур Артур | Добавлено - 2015-04-15 | Просмотров - 3103 | Скачено - 39

1HTML Разметка.

   
  • path-img - содержит путь к картинки которая по нажатию будет устанавливаться на фон сайта.
.list{
    margin: 100px auto;
    width: 620px;
    height: 130px;
}
.list li{
    border: 2px solid white;
    float: left;
    margin: 10px;
    width: 100px; height: 100px;
    border-radius:50% ; 
    -webkit-border-radius:50% ; 
    -moz-border-radius:50% ;     
    overflow: hidden;
    cursor: pointer;
}

2JQuery код для смены фона

$(document).ready(function(){

    $('.list li').click(function () {
      
      var img_path = $(this).attr("path-img"); // Путь к изображению
      
      $('.list li').css("border-color","white"); // Сбрасываем у тегов li рамку, ставим цвет белый
      $(this).css("border-color","#C75C5C"); // Устанавливаем красную рамку у выбранной картинки
      $('body').css('background','url('+img_path+') repeat'); // Меняем фон страницы
      
    });    

       
});	

Интересное

Комментарии