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条件逻辑根据状态在各种图像之间切换。代码在单个图像上运行良好，但我已将它们组合成一个精灵表，现在需要从工作表中分配单个图像。为此，我需要将每个图像定义为JavaScript变量。

应该插入什么来代替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代码（您可以用精灵坐标替换＆＃34; 50x50＆＃34;）

<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的背景属性，并显示您创建的精灵。没有理由在javascript中创建Image对象并尝试将其应用于您的代码。

在javascript中从精灵表中声明单个图像

2 个答案: