0

我们有一个大图像设置为背景的 div。在大多数情况下，背景图像会比 div 大。因此 div 背景平移。（请参阅小提琴）。

该图像是带有房间的平面图。
房间由一些带有某个位置 (x,y) 的标记表示。（暂时未在示例中显示）

<div class="bg-img"></div>

<p>
    <input type="button" value="center on a point" id="center"/>
</p>

div.bg-img {
    background-image: url(http://www.bumc.bu.edu/supportingbusm/files/2012/01/Typical-Floor-Plan.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-color: blue;
    border: 1px solid #aaa;
    width: 450px;
    height: 450px;
    margin: 25px auto;        
}

同样的小提琴在这里

用于移动div背景的代码是@jQuery - 拖动div css背景

我们想要的是在视口中的图像中居中一个已知点 (x,y)。（或以已知点为中心？）

点 (x,y) 将是房间的位置。当用户单击列表中的任何房间时，视口应平移到房间的位置。所有房间都有一些预定义的（x，y）位置。（类似于谷歌地图如何将其地图集中在标记位置上）。此外，如果房间/点位于地图的边缘，将其带入视口也足够了。

无法弄清楚如何使视口部分居中。有什么线索吗？

注意 1：在下面的示例中，用户单击“房间 3”，“房间 3”被平移到视图中并在视口中居中。

注意 2：房间 3 没有准确显示在视口的中心（假设是），只是为了清楚起见粗略的图片。示例中也未显示房间标记。

如果点击房间 3

同样的小提琴在这里

4

1 回答 1

1

您可能希望将背景位置 x 和 y 坐标分别设置为 center.x - point.x 和 center.y - point.y。例如，如果背景图像是 100px 宽 x 200px 高，则 center.x 为 50，center.y 为 50。因此，如果您想定位背景图像以使位置 (75, 75) 居中，则背景图像将位于 (-25px, -25px) 的位置以将其向上和向左拉，这样相对于视口，向右 75px 和向下 75px 现在在向左 50px 和向下 50px 处。

于 2013-05-27T20:07:29.330 回答