JavaScript 图像对象答案

【问题标题】：JavaScript image objectsJavaScript 图像对象
【发布时间】：2013-03-05 20:49:19
【问题描述】：

我想要一种将对象相对定位到 div 左上角的方法。或一种使用 JavaScript 创建某种图像视图（不使用 HTML img 标签）的方法，该视图将相对于 div 显示在屏幕上。会有多个这些图像，我希望它们能够重叠。我正在尝试重新制作我在 Xcode 上制作的游戏，其中涉及与网格对齐移动的块（将在 1000x700 像素的窗口中）

我是 javascript 的初学者

【问题讨论】：

-1。对不起，但你的问题不够详细和研究。这有点令人困惑，并且您没有提供有关为什么要避免使用 HTML <img> 标记的上下文。顺便说一句，在 HTML 中添加图像有三种方法。 1）直接指定<img>标签，2）在脚本标签中，创建Image()的实例并使用element.appendChild()。如果你愿意使用画布，那么 3) 创建一个<canvas> 元素并使用context.drawImage()。

标签： javascript html image object

【解决方案1】：

关于第一个选项（定位图像），您可以只使用 CSS 来完成（或使用 JavaScript 操作相同的 CSS 属性）。你只需要：

一个带有position: relative的容器。
内部带有position: absolute 的元素。然后操作它们的top、left、right 和bottom 属性（将与容器相关）。

【讨论】：

【解决方案2】：

没有完整的上下文很难推荐任何东西，但你可以用一些基本的 CSS 来做到这一点。

由于您不想使用图像标签，您可以在包含的 div 上添加背景图像。然后将该图像放置在您需要的位置。

示例：http://jsfiddle.net/ufomammut66/wctJc/1/

我们使用background-position 来定义显示图像的位置。您可以使用关系（上、中、下、右、左）或实际像素位置（X Y 表示法 IE：100px 5px）来告诉定义它应该显示的位置。

根据您将要做的事情（因为它是一个游戏），将项目分成主容器的不同子项可能更有意义。因此，您将拥有一个带有 position:relative 的元素和一系列其他带有 position:absolute 的元素。绝对定位的元素可以像背景一样放置 - 以像素为单位设置 X Y 位置 (top:100px;left:5px)。此外，您可以为它们设置动画以四处移动并与事物交互。在下面的示例中，我使用 jQuery 为元素设置动画，主要是因为 jQuery 让动画变得超级简单。

示例：http://jsfiddle.net/ufomammut66/QxGhD/2/

【讨论】：