0

だから私はマウスホバーで背景を変更するロゴを持っています.5つの異なる背景をマウスホバーに表示し、ランダム化せず、5番目のマウスホバーが完了すると最初の背景に戻そうとしています. どうすればこれを達成できますか?

これがjqueryスクリプトです

$(document).ready(function(){
  $("#logo").hover(
  function() {
    $(this).stop().animate({"opacity": "0"}, "slow");
  },
  function() {
    $(this).stop().animate({"opacity": "1"}, "slow");
  });
});

そしてCSS

div#logo{
    background-image:url(../images/logo.png);
    background-repeat:no-repeat;
    width:216px;
    height:235px;
    position:absolute;
    right:45px;
    top:5px;
    z-index:12;
}

div#logo_hover{
    background-image:url(../images/logo_hover_blue.png);
    background-repeat:no-repeat;
    width:216px;
    height:235px;
    position:absolute;
    right:45px;
    top:5px;
    z-index:11;
}

編集：

Scott M. のアドバイスに従い、次のコードを取得しました。

$("#logo").click(function () {
  var color = $(this).css("background-image", "background" + bgnum + ".png");
});

それはおそらく何かが欠けている...

しかし、問題は、他の div (logo1、logo2、logo3、および logo4) をそれぞれの画像に追加し、マウスホバーがオンになるまで非表示にする方法がわからないことです。最善の方法は何ですか? 表示：なし？

4

1 に答える 1

5

カウンター (bgnum など) を維持し、それをファイル名と連結して、それぞれの背景を取得できます。次に、ホバー時に使用してcssを設定します

.css("background-image", "background" + bgnum + ".jpg")

次に、カウンターをインクリメントし、mod を 5 ずつ増やして、バックグラウンドの数を超えないようにします。

bgnum = (bgnum + 1) % 5;
于 2009-11-12T19:59:27.343 に答える