将图像移动到预定义的x，y位置

Question

我为用户构建自定义位置选择器，实际上是用户进入其国家/地区的地图（图片）和text input。自定义地图大约为1500x1000像素。最终目标是慢慢地将地图自动滚动到所选国家/地区的某个预定义x,y。我可以如何定义德国位于700x800，并在用户从下拉列表中选择该国家时将地图图像置于该点的中心位置？

这是我的fiddle，其中包含可移动的地图（我没有在这里添加任何代码，因为它很长，请原谅我并使用小提琴来浏览代码）

Answer 1

使用Position对象。让我们说

var germany = new Position(-700,-800);

您可以使用其余代码设置位置：

germany.Apply(document.getElementById('draggableElement'));

虽然我猜它会设置左上角的位置而不是中心位置，所以你需要牢记这一点。

编辑：将数字更改为负数，因为这实际上会将图片向上移动并离开，我认为这是您想要的行为。

出于演示目的，我在Fiddle添加了一个按钮。虽然这绝对不是德国人;）

EDIT2： 要使用jQuery的动画制作位置更改动画，只需使用以下语法：

$('#draggableElement').animate({
    left: germany.X,
    top: germany.Y
});

另请参阅更新后的JSFiddle。