7

これはかなり簡単なはずのことのように思えますが、実際にそれを行う方法が見つかりません。

アニメーション http://doir.ir/css.gif

これらのそれぞれのリンクをクリックすると、ページの背景色を変更して移行する必要があります。このタイプの遷移をトリガーする最も近いものは次のとおりです。

デモ でhtml5とcss3のみを使用してボディの背景色を変更する

これは非常に近いですが、マウスがリンクの上に置かれている場合にのみ機能します。:hover の疑似セレクターを考えられるすべてのものに置き換えてみましたが、リンクをクリックしても何も「固執」しません。

基本的に、リンクのリストがあり、リンクをクリックすると別の曲が再生されます ( html5 経由)。現在再生中の曲に合わせて背景を遷移させたい。必要に応じて、javascript または jquery を使用できます。何かアドバイス？

4

3 に答える 3

8

これどう？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-17T19:29:57.283 に答える
7

私はあなたのために非常に多様な解決策を持っています！

ところで: 素晴らしい挑戦をありがとう: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

于 2013-10-17T19:36:59.010 に答える