背景图像平滑滚动到某个 (x,y) 点答案

【问题标题】：Background image scroll smoothly to certain (x,y) point背景图像平滑滚动到某个 (x,y) 点
【发布时间】：2015-05-14 07:47:35
【问题描述】：

我建立了一个类似div 的“窗口”和一个更大的图像（它是世界地图），因此用户实际上可以“抓住”它并滚动到任何方向。下一个目标是让用户选择他的国家，地图将以该国家为中心。由于它是自定义地图，我需要输入自己的坐标，这里没问题。现在（出于演示目的）我创建了一个图像中心点。过渡是即时的，如何使用 jQuery animate 属性平滑滚动到 x,y 点？

现在，这就是我滚动到点的方式：

var country_1 = new Position(-700,-800);
$("button").click(function(){
    country_1.Apply(document.getElementById('draggableElement'));
});

Fiddle

【问题讨论】：

标签： jquery html smooth-scrolling

【解决方案1】：

您可以使用animate method 为更改设置动画：

var anim = {};
if(!isNaN(this.X))
    anim.left = this.X;
if(!isNaN(this.Y))
    anim.top = this.Y;
$(element).animate(anim, 1000);

演示：http://jsfiddle.net/3gskot27/3/

【讨论】：

感谢您的回答，但这会禁用图像的滚动功能，只有在用户首先触发动画时才有效。
@undroid：好的，那么您可以将其添加到单独的方法中以用于平滑滚动，并保留原始的Apply 方法以实现可滚动性。