1

我有一个名为 main 的 div：

 <div id="main">

我还有一个带颜色的 div：

 <div id="colors">

在 div 颜色中，我有一个颜色列表：示例

红色的

蓝色的

黄色的

如果我单击 1 种颜色，我想更改 div 主的颜色。

我已经有了：

$("#main").hover(function() 
{ 
    $(this).stop().animate({ backgroundColor: "#a7bf51"}, 800); 
}
    ,function() {
    $(this).stop().animate({ backgroundColor: "#8D8D86" }, 800); 
});

这会改变我想要的颜色。

但我希望 div 中的颜色具有这种效果。

所以如果我点击黄色，颜色一定不是#a7bf51，但如果我点击黄色，它必须是黄色，如果我点击红色，它必须是红色。

我也试过

 <a  href="#top" class="testClick" onclick="
                document.getElementById('#bord').style.backgroundColor='#350000';
            ">Rood </a>

将背景图像变为#350000

但是我想要一个包含很多颜色的大列表 20+ 所以如果我可以制作一个功能会更好，并且通过该功能我还可以使用动画效果很好。

那么有人可以帮助我以正确的方式改变背景颜色的效果吗？

4

4 回答 4

1 
var color = '';
$('div').click(function() {
    var clr = $(this).css('backgroundColor');
    var color= hexc(clr);


$(this).animate({ backgroundColor: color }, 'fast');

})

希望它有效..

于 2013-03-19T11:04:34.960 回答
1

试试这个

HTML

<div id="colors"> 
  <span id="#a7bf51">red</span>
  <span id="#8D8D86">green</span>
  ........
</div>

jQuery

$('#colors span').click(function(){
     var color=$(this).attr('id');
     $('#main').stop().animate({ backgroundColor: color }, 800);
});
于 2013-03-19T11:05:22.257 回答
0

试试这个：

$('#colors p').click(function(){

    color = $(this).innerHTML;

    $('#bord').stop().animate({
        backgroundColor: color
    }, 800);

}

这是假设您的“颜色”div 充满了包含颜色的 p 元素

它还假定您的文本颜色是有效的 HTML 颜色名称。

http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color

于 2013-03-19T11:05:04.267 回答
0

HTML

<div id="main">
    Some content
</div>

<div id="colors">
   <p>Red</p>
   <p>Blue</p>
   <p>Yellow</p>
</div>

jQuery

 $(document).ready(function() {
        $('#colors p').on('click',function(){
            var color = $(this).text();
            $('#main').stop().animate({ backgroundColor: color }, 800);
        });
    });
于 2013-03-19T11:06:30.570 回答