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

}

これは、'colors'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>

Jクエリ

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