從JavaScript中的Sprite工作表中聲明一個圖像

Question

我正在嘗試從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條件邏輯根據狀態在各種圖像之間切換。 該代碼可以很好地處理單個圖像，但是我將它們組合成一個sprite工作表，現在需要從工作表中分配單個圖像。 為了做到這一點，我需要將每個圖像定義為一個JavaScript變量。

應該在background: url...處插入什么background: url...字符串？

Answer 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代碼（您可以將Sprite坐標替換為“ 50x50”）：

<img class="sprite-50-50" width="100" height="200" src="use-a-blank-image.gif" alt="" >

Answer 2

我不確定您要嘗試做什么，因為代碼有點怪異。 src屬性是圖像的src 。 如果您正在制作精靈...那么您可能應該使用div標簽，甚至不使用img。 子畫面通常不是“ img”標簽，而通常是“ div”標簽，這些標簽的格式設置為使用背景圖像僅顯示子畫面的一幀。 您只需要使用backgroundImage和backgroundPosition屬性來調整div的backgroundPosition屬性，並顯示您創建的精靈。 沒有理由在javascript中創建Image對象，然后嘗試將其應用於您的代碼。