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图像的。如果你正在做一个精灵......那么你可能应该使用 div 标签，甚至不使用 img。精灵通常不是“img”标签，而通常是“div”标签，它们被格式化为使用背景图像仅显示精灵表的单帧。您只需要使用backgroundImage和属性调整 div 的背景属性backgroundPosition并显示您创建的精灵。没有理由在 javascript 中创建 Image 对象并尝试将其应用于您的代码。

于 2013-01-20T23:15:39.503 回答