Показать разные фоновые изображения тела на основе выбора

Question

Я не уверен, если это возможно, но я хочу, что если вы выбираете опцию в меню выбора, что фон будет меняться на странице

Может также сделать с плавным угасанием выцветания в анимации?

codepen

HTML:

<br><br><br> 
    <select class="form-control select"> 
    <option> Show London Background Picture</option> 
    <option> Show Paris Background Picture</option> 
    <option> Show Italy Background Picture</option> 

    </select> 


    <br> 
    <div class="jumbotron"> 
IF LONDON SELECTED THEN BACKGROUND: <br>http://www.manners.nl/wp-content/uploads/2014/08/Manners-stijlvolste-steden-londen-6.jpg<br><br> 
IF PARIS SELECTED THEN BACKGROUND: <br>  
http://travelnoire.com/wp-content/uploads/2013/12/eiffel-tower-paris-2.jpg<br><br> 
IF ITALY SELECTED THEN BACKGROUND: <br> 
    https://upload.wikimedia.org/wikipedia/commons/5/53/Colosseum_in_Rome,_Italy_-_April_2007.jpg</div> 
</div> 

CSS:

body { 
    background-image: url("http://www.manners.nl/wp-content/uploads/2014/08/Manners-stijlvolste-steden-londen-6.jpg"); 
    background-attachment: fixed; 
    background-position: 50% 50%; 
    background-size: cover; 
} 

Answer 1

Вы можете применить функцию к OnChange-события вашего выбора-элемента, который изменяет background-image вашего сайта:

$('#ID_OF_YOUR_SELECT').change(function() { 
    $('body').css('background-image', 'url("' + this.value + '")'); 
}); 

Вот обновленный codepen основанный на вашем примере: http://codepen.io/anon/pen/yNvapW

Answer 2

Добавление к Asgaros ответа, я добавил замирание в и функции.

Вот результат: http://codepen.io/anon/pen/wayzyx. Эффект был сделан путем добавления нескольких строк css в css для тела.

-webkit-transition: background 0.8s linear; 
-moz-transition: background 0.8s linear; 
-o-transition: background 0.8s linear; 
transition: background 0.8s linear; 

Answer 3

Это изменяет класс body и замирает фон при изменении значения select.

//set background based on default select value 
 
$(document).ready(
 
    function() { changeBackground.call($('.form-control')); } 
 
); 
 

 
//change background when select value is changed 
 
$('.form-control').change(function() { 
 
    changeBackground.call($(this)); 
 
}); 
 

 
function changeBackground() { 
 
    var $body = $('body'); 
 
    var values = ""; 
 
    this.children('option').each(function() { 
 
    values += $(this)[0].value + " "; 
 
    }); 
 
    var selectedValue = this[0].value; 
 
    
 
    $body.removeClass(values.replace(selectedValue, "")); 
 
    $body.addClass(selectedValue); 
 
};

body { 
 
    background-attachment: fixed; 
 
    background-position: 50% 50%; 
 
    background-size: cover; 
 
    -webkit-transition: background-image 500ms ease; 
 
    transition: background-image 500ms ease; 
 
} 
 
body.london { 
 
    background-image: url("http://www.manners.nl/wp-content/uploads/2014/08/Manners-stijlvolste-steden-londen-6.jpg"); 
 
} 
 
body.paris { 
 
    background-image: url("https://images.indiegogo.com/file_attachments/620900/files/20140602122905-paris.jpg?1401737345"); 
 
} 
 
body.italy { 
 
    background-image: url("http://www.liberty-int.com/Public/Italy-Signature-Slide5-Venice.jpg"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<br><br><br> 
 
    <select class="form-control select"> 
 
    <option value="london">Show London Background Picture</option> 
 
    <option value="paris">Show Paris Background Picture</option> 
 
    <option value="italy">Show Italy Background Picture</option> 
 

 
    </select> 
 

 

 
    <br> 
 
    <div class="jumbotron"> 
 
IF LONDON SELECTED THEN BACKGROUND: <br>http://www.manners.nl/wp-content/uploads/2014/08/Manners-stijlvolste-steden-londen-6.jpg<br><br> 
 
IF PARIS SELECTED THEN BACKGROUND: <br>  
 
http://travelnoire.com/wp-content/uploads/2013/12/eiffel-tower-paris-2.jpg<br><br> 
 
IF ITALY SELECTED THEN BACKGROUND: <br> 
 
    https://upload.wikimedia.org/wikipedia/commons/5/53/Colosseum_in_Rome,_Italy_-_April_2007.jpg 
 
</div>