切换背景颜色与点击跳转

这似乎是应该很容易，但我真的找不到办法做到这一点。切换背景颜色与点击跳转

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

我需要改变&变换的网页的背景颜色，当你点击这些相应的链接。触发这种转换我见过最接近的事是这样的：

changing body background color using only html5 and css3 与demo

这是非常密切的，但是这只能当鼠标悬停在链接。我已经尝试替换伪选择器：将鼠标悬停在可以想象的所有内容上，但单击链接后没有任何“粘住”。

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

来源

2013-10-17 fanfare

点击事件只能用Javascript处理。你可以添加一个JavaScript类和删除一个类，以获得你想要的效果。 – Niels

是否有此功能？ 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颜色。

来源

2013-10-17 19:29:57

哇！我不能够感谢你了!!!!! – fanfare

这是一个很好的答案，但我会建议让jQuery更加简化和通用！做得好！ –

是的，我注意到后，乔希。不怕！烤宽面条为我们修好了！ –

我有一个非常多元化的解决方案给你！

BTW：感谢伟大的挑战：对

<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

来源

2013-10-17 19:36:59

切换背景颜色与点击跳转

回答

相关问题