1

javascriptでスプライトシートから画像を定義して宣言しようとしています。外部スタイルシート内の画像を次のように定義しました。

#myimage{ background-position: 0 -751px; width: 21px; height: 21px; }

.dwg { background:url(spriteSheet.png) no-repeat;}

私は次のようなさまざまなアレンジを試しましたが、もちろんどれもうまくいきません。 

myimage=new Image();
myimage.src="background:url('spriteSheet.png') 0 0; width: 35px; height: 16px;  no-repeat";

私は次のように画像を使用します：

document.stat.src = myimage.src;

私のJavascript条件付きロジックは、ステータスに応じてさまざまな画像を切り替えます。コードは個々の画像で正常に機能しましたが、それらをスプライトシートに結合したため、シートから個々の画像を割り当てる必要があります。そのためには、各画像をJavaScript変数として定義する必要があります。

文字列の代わりに何を挿入する必要がありbackground: url...ますか？

4

2 に答える 2

1

数か月後、次のアプローチを使い始めましたが、それが最も簡単になりました。

JS コード:

    $('[class*=sprite-]').each(function(){
        var crr = this.className.match(/sprite\-(\d+)\-(\d+)/);
        if ( crr && crr[2]) {
            $(this).css('background-position', '-'+ crr[1] +'px -'+ crr[2] +'px');
            $(this).addClass('sprite');
        }
    });

CSS コード:

.sprite {
    border: none;
    background-color: transparent;
    background-image: url(your-sprite-image.gif);
    background-repeat: no-repeat;
}

HTML コード (「50x50」をスプライト座標に置き換えることができます):

<img class="sprite-50-50" width="100" height="200" src="use-a-blank-image.gif" alt="" >
于 2013-05-31T21:12:27.687 に答える
0

コードが少し変なので、何をしようとしているのか 100% 確信が持てません。src属性はsrc画像のです。スプライトを作成している場合は、img を使用するのではなく、おそらく div タグを使用する必要があります。スプライトは通常、「img」タグではなく、通常、背景画像を使用してスプライト シートの単一フレームのみを表示するようにフォーマットされた「div」タグです。backgroundImageプロパティを使用して div の背景プロパティを調整し、backgroundPosition作成したスプライトを表示するだけで済みます。JavaScript で Image オブジェクトを作成し、それをコードに適用しようとする理由はありません。

于 2013-01-20T23:15:39.503 に答える