javascript - 将图像移动到预定义的 x,y 位置

Question

我正在为用户构建一个自定义位置选择器，它本质上是一张 map (图像)和一个用户输入其国家/地区的文本输入。自定义 map 大约为 1500x1000 像素。最终目标是将 map 缓慢地自动滚动到选定国家/地区的某个预定义的 x,y。比方说，我如何定义德国位于 700x800，并在用户从下拉列表中选择该国家/地区时将 map 图像围绕该点居中？

这是我的 fiddle ，其中包括可移动 map (我没有在这里添加任何代码，因为它很长，请原谅并使用 fiddle 浏览代码)

Answer 1

为此使用 Position 对象。假设

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

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

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

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

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

出于演示目的，我在您的 Fiddle 中添加了一个按钮.虽然这绝对不是德国 ;)

编辑2: 要使用 jQuery 的 animate 为位置变化设置动画，只需使用以下语法:

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

另请参阅更新的 JSFiddle .