1

別のdivにカーソルを合わせると、jQueryを使用して複数の画像を切り替えています。コードは次のとおりです。

var imgs=['img/image01.png',
    'img/image02.png',
    'img/image03.png',
    'img/image04.png'];
var $img = $('#toons');

$('#logo').on('mouseover', function() {
    var current = imgs.indexOf($img.attr('src'));
    $img.attr('src', imgs[++current] || imgs[0]);
});

HTML:

<img id="toons" src="img/image01.png" />

div#logo にカーソルを合わせるたびに、画像が前後に変化します。これはうまく機能しますが、スタイルシートで CSS スプライトと背景画像を使用して同じことを達成できるかどうか疑問に思っています。必要な 4 つの画像を含む 1 つのキャンバスだけです。可能性はあると思いますが分かりません。誰かが助けてくれれば幸いです。

4

1 に答える 1

1

単なる「数字の帯」にすぎない単純なグラフィックから始めましょう。あなたが求めている概念を示すのに良い画像であり、最も重要なことは、私はすでにそれを作成していたことです. ここにあります...

数字 http://www.secretagentorange.com/_test/numbers.png

この画像は、6 つの個別の 40x40 アイコンを組み合わせて作成されました。私はそれを行うために PS Elements を使用しましたが、GIMP や他の多くの画像エディターでこの仕事を達成できました。単一のビットマップは、「スプライト」と呼ばれる 6 つの個別の画像で構成されています。CSS の background-position-x プロパティを調整して (そして、「開口部」または表示ウィンドウが 1 つのスプライトだけを表示するのに十分な大きさであることを確認して)、一度に 1 つのスプライトのみを表示するように画像を操作します。

次の JavaScript が与えられた場合:

$( '#logo2' ).on( 'mouseover', function() {
    var current2 = $( '#toons2' ).css( "background-position" ).split( " " );
    current2[0] = parseInt( current2[0].replace( "px", "" ), 10 );
    current2[0] = ( ( current2[0] > -120 ) ? current2[0] - 40 : 0 );
    $( '#toons2' ).css( "background-position", current2[0] + "px 0" )
});

および HTML:

<div id="toons2"></div>
<div id="logo2">hover2</div>

およびCSS:

#toons2 {
    width: 40px;
    height: 40px;
    background: transparent url( 'img/image01.png' ) no-repeat;
    background-position: 0 0;
}

div#logo2 の上にマウスを置くたびに、div#toons2 の背景画像が変更されることが期待できます。(この場合、最初の 4 つのアイコンが順番に表示され、繰り返されます。)

div#toons2 の高さと幅は重要です。1 つのスプライト (40x40) の正確な高さと幅に一致する必要があります。たとえば、幅 35 ピクセル、高さ 90 ピクセルの個々のスプライトを組み合わせたグラフィックがある場合、div#toons2 の高さと幅を幅 35、高さ 90 に設定する必要があります。これは次のとおりです。すべて非常に簡単です。

JavaScript に関して言えば、ホバーするたびに background-position-x の値を -40 ピクセルずつ調整するだけです。これが各スプライトの幅だからです。最初は...

1 http://www.secretagentorange.com/_test/number1-open.png

ここで、マウスを初めて上に置いたときに、「数字ストリップ」の x 位置を -40 ピクセルずつ調整し、実質的に div#toons2 の CSS を次のように設定します...

background-position: -40px 0;

それは...

2 http://www.secretagentorange.com/_test/number2-open.png

次回マウスオーバーすると、backgroundPositionX は -80px になり、次のように表示されます...

3 http://www.secretagentorange.com/_test/number3-open.png

最後に、background-position-x を -120px に設定すると、画像の 4 番目のアイコン、つまり...

4 http://www.secretagentorange.com/_test/number1-closed.png

ジャバスクリプトを見てみましょう。この行：

var current2 = $( '#toons2' ).css( "background-position" ).split( " " );

div#toons2 の X および Y backgroundPosition 値を取得します。

この場合、次のように X 値のみに関心があります。

current2[0] = parseInt( current2[0].replace( "px", "" ), 10 );

ここでは、最初のインデックスを取得し、予想されるサフィックスをすべて取り除き、文字列を整数に変換しています。数値が得られたので、簡単に操作できます。

この例では、グラフィックを 40 ピクセル左に移動して後続の各スプライトを表示する必要があるため、整数から 40 を引きます。ただし、4 つの画像のみを表示したいので、ポスターの元の状態に合わせて、行き過ぎないようにチェックします。4 番目のスプライトを表示したら、X 値をゼロにリセットします。次の行はこれを行います:

current2[0] = ( ( current2[0] > -120 ) ? current2[0] - 40 : 0 );

新しい X 値に到達したら、backgroundPositionX プロパティにプラグインするだけです。

 $( '#toons2' ).css( "background-position", current2[0] + "px 0" )

ここで、新しい値を定義する文字列を作成します。(2 番目の引数 '0' は、変更を必要としない Y 位置です。)

それはそれを行います。

これがフィドルです (http://jsfiddle.net/UxKyY)。これには、元の条件と推奨される解決策が含まれています。

于 2013-04-10T04:52:56.267 に答える