CSS3,ZOOM + PAN(谷歌地图风格)

Woj*_*ech 7 zoom css3 pan coordinate-systems coordinate-transformation

我需要使用CSS3 ZOOM和PAN一个div元素,
能够混合缩放和平移,
所以你可以放大,平移,放大一些,平移,缩小等.

ZOOMING已经解决了这个问题: CSS3缩放鼠标光标
,绝对是BRILLIANT的答案!这里: CSS3缩放鼠标光标

现在的问题是:如何将PANNING与ZOOMING结合起来(从上面的答案中)?

到目前为止,我尝试使用jQuery UI draggable http://jqueryui.com/draggable/, 如下所示:

<div id="graphics"> 
$("#graphics").draggable();
$("#graphics").draggable('enable');
Run Code Online (Sandbox Code Playgroud)

但是当我在放大图像时开始拖动图像时它会"跳跃".

我认为一个好的答案可以帮助很多人,因为这是非常基本的功能,但在网络上没有解决方案,我可以在相当广泛的搜索后找到它!

Woj*_*ech 1

解决了:)实际上非常简单!#graphics 必须具有:“position:relative”而不是“position:absolute”