javascript - 根据 slider 图像更改具有模糊效果的页面背景颜色

Question

是否有可能通过 JavaScript 或 CSS 获得类似的效果？实现这种效果的最佳方法是什么。

基本上它所做的是根据 slider 图像改变页面的背景颜色，并产生一些漂亮的模糊效果。

参见示例:http://www.gog.com主页 slider 。 (我相信他们只是在 photoshop 中为每个 slider 图像创建背景图像。

http://images-1.gog.com/23382bd5e4e5deb7036d68e04286120df2a1d424881fcafb21ecd2c9a5c24ab5_bg_1920.jpg

http://images-2.gog.com/a88f5d7a5161fb204d2f78adf14eea73e03dde54eb8ab516e50b077dcbb72cba_bg_1920.jpg

http://images-3.gog.com/ab956772ba01063aadfb8cda56d2e9ed3a6e0abd1534ce94b5f3a524e085656f_bg_1920.jpg

Answer 1

这是使用 jQuery 完成此操作的一种方法。

它使用三个固定位置的 div，然后为它们的不透明度设置动画。

$('button').click(function() {
  var id= 'd' + $(this).text().replace('Background ','');
  $('#d1, #d2, #d3').each(function() {
    $(this).animate({
      opacity: this.id===id ? 1 : 0
    });
  });
});

button {
  position: relative;
}

#d1, #d2, #d3 {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

#d1 {
  background-image: url("http://images-1.gog.com/23382bd5e4e5deb7036d68e04286120df2a1d424881fcafb21ecd2c9a5c24ab5_bg_1920.jpg");
}

#d2 {
  background-image: url("http://images-2.gog.com/a88f5d7a5161fb204d2f78adf14eea73e03dde54eb8ab516e50b077dcbb72cba_bg_1920.jpg");
}

#d3 {
  background-image: url("http://images-3.gog.com/ab956772ba01063aadfb8cda56d2e9ed3a6e0abd1534ce94b5f3a524e085656f_bg_1920.jpg");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>

<button>Background 1</button>
<button>Background 2</button>
<button>Background 3</button>