Question

这似乎应该很容易，但我真的找不到办法。

animation http://doir.ir/css.gif

我需要改变＆amp;单击这些相应链接时转换页面的背景颜色。我见过的最接近这种转变的事情就是：

changing body background color using only html5 and css3 使用demo

非常接近，但这仅在鼠标悬停在链接上时才有效。我已经尝试将伪选择器替换为：悬停到可以想象的所有东西，但是在点击链接后没有什么“粘住”。

基本上，我有一个链接列表，当你点击任何链接时，它会播放不同的歌曲（通过html5）。我希望背景根据当前正在播放的歌曲进行转换。如果必要，我可以使用javascript或jquery。有什么建议吗？

Answer 1

这是怎么回事？ http://jsfiddle.net/u6PPn/2/

关键部分是jQuery：

$(".color").click(function() {
    var color = $(this).text();
    $("body").animate({ backgroundColor:color},1000);
});

HTML：

<div class="color">Red</div>
<div class="color">Green</div>
<div class="color">Blue</div>

这样您可以设置n颜色。

Answer 2

我有一个非常多样化的解决方案！

顺便说一句：谢谢你们面临的巨大挑战：p

<button value="black" class="black btn">Black</button>
<button value="red" class="red btn">Red</button>
<button value="brown" class="brown btn">Brown</button>
<button value="orange" class="orange btn">Orange</button>
<button value="mediumSeaGreen" class="green btn">MediumSeaGreen</button>

<强> CSS

body {
  -webkit-transition: .6s ease;
  -moz-transition: .6s ease;
  -ms-transition: .6s ease;
  -o-transition: .6s ease;
}

<强>的jQuery

$('.btn').on('click', function() {
   var valColor = $(this).val();

   $('body').css({
       background: valColor        
   });
});

JSFIDDLE

点击时切换背景颜色和过渡

2 个答案: