[英]Declaring a single image from a sprite sheet in javascript
I'm trying to define and declare an image from a sprite sheet in javascript. 我正在尝试从javascript中的精灵表定义和声明图像。 I've defined the image within an external style sheet as follows:
我已经在外部样式表中定义了图像,如下所示:
#myimage{ background-position: 0 -751px; width: 21px; height: 21px; }
.dwg { background:url(spriteSheet.png) no-repeat;}
I've tried various arrangements similar to the following, none of which, of course, works. 我尝试了与以下类似的各种安排,但这些安排都没有用。
myimage=new Image();
myimage.src="background:url('spriteSheet.png') 0 0; width: 35px; height: 16px; no-repeat";
I use the image as follows: 我使用如下图像:
document.stat.src = myimage.src;
My Javascript conditional logic switches between various images depending upon status. 我的Javascript条件逻辑根据状态在各种图像之间切换。 The code has worked fine with individual images, but I have combined them into a sprite sheet and now need to assign individual images from the sheet.
该代码可以很好地处理单个图像,但是我将它们组合成一个sprite工作表,现在需要从工作表中分配单个图像。 And in order to do so, I need to define each image as a JavaScript variable.
为了做到这一点,我需要将每个图像定义为一个JavaScript变量。
What should be inserted in place of the background: url...
string? 应该在
background: url...
处插入什么background: url...
字符串?
A few months I a started using the following approach and it became the easiest to me: 几个月后,我开始使用以下方法,这对我来说是最简单的:
JS code: 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 code: CSS代码:
.sprite {
border: none;
background-color: transparent;
background-image: url(your-sprite-image.gif);
background-repeat: no-repeat;
}
HTML code (You may replace "50x50" by your sprite coordinate): HTML代码(您可以将Sprite坐标替换为“ 50x50”):
<img class="sprite-50-50" width="100" height="200" src="use-a-blank-image.gif" alt="" >
I am not 100% sure what you are trying to do because the code is a little weird. 我不确定您要尝试做什么,因为代码有点怪异。 The
src
attribute is the src
of the image. src
属性是图像的src
。 If you are doing a sprite... then you should probably be using a div tag, not even using an img. 如果您正在制作精灵...那么您可能应该使用div标签,甚至不使用img。 Sprites are usually not "img" tags, but usually "div" tags that are formatted to show just a single frame of your sprite sheet using a background-image.
子画面通常不是“ img”标签,而通常是“ div”标签,这些标签的格式设置为使用背景图像仅显示子画面的一帧。 You would only need to adjust the background properties of the div using
backgroundImage
and backgroundPosition
properties and show the sprite you have created. 您只需要使用
backgroundImage
和backgroundPosition
属性来调整div的backgroundPosition
属性,并显示您创建的精灵。 There is no reason to create an Image object in javascript and try to apply it to your code. 没有理由在javascript中创建Image对象,然后尝试将其应用于您的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.