Question

我不确定这是否可行，但我希望如果您在选择菜单中选择一个选项，背景将在页面上更改

也可以通过动画淡出淡出淡出来完成吗？

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

您可以将一个函数应用于select元素的onchange事件，该事件会更改您网站的背景图片：

$('#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：背景0.8s线性; -moz-transition：背景0.8s线性; -o-transition：背景0.8s线性; 过渡：背景0.8s线性;

Answer 3

这会更改proceed = function() {...}; ajax_completed = false; $.ajax(..., success: function(data) { ajax_completed = true; ... } ); $("#btn").on('click', function(ev){ if(ajax_completed) {...} });的类，并在body值更改时淡出背景。

＆＃13;

select

＆＃13;

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

＆＃13;

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

＆＃13;

根据选择显示不同的身体背景图像

3 个答案: