[英]Declaring a single image from a sprite sheet in javascript
我正在尝试从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...
字符串?
几个月后,我开始使用以下方法,这对我来说是最简单的:
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="" >
我不确定您要尝试做什么,因为代码有点怪异。 src
属性是图像的src
。 如果您正在制作精灵...那么您可能应该使用div标签,甚至不使用img。 子画面通常不是“ img”标签,而通常是“ div”标签,这些标签的格式设置为使用背景图像仅显示子画面的一帧。 您只需要使用backgroundImage
和backgroundPosition
属性来调整div的backgroundPosition
属性,并显示您创建的精灵。 没有理由在javascript中创建Image对象,然后尝试将其应用于您的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.