2014-02-07 12 views
7

Ich muss mit CSS3
mit der Fähigkeit, Zoom und Pan ein div-Element Zoom- und Pan,
zu mischen so konnte man zum Beispiel Zoom-in, Pan, Zoom-in etwas mehr, Pan, Zoom-out usw.CSS3, ZOOM + PAN (Google Maps-Stil)

ZOOMING hat in dieser Lauffläche gelöst: CSS3 zooming on mouse cursor
mit einer absolut BRILLIANT Antwort! hier: CSS3 zooming on mouse cursor

Jetzt ist die Frage: Wie man PANNING mit dem ZOOMING kombiniert (von der Antwort oben)?

Bisher habe ich versucht, jQuery UI ziehbar http://jqueryui.com/draggable/ wie folgt aus:

<div id="graphics"> 
$("#graphics").draggable(); 
$("#graphics").draggable('enable'); 

aber es „springt“, wenn ich das Bild beginnen Sie zu ziehen, wenn es gezoomt-in ist.

Ich denke, eine gute Antwort auf diesen ganz wenigen Menschen helfen könnte, da dies ganz grundlegende Funktionalität und doch gibt es keine Lösung für sie auf dem Netz, die ich nach recht umfangreicher Suche finden konnte!

+1

Gelöst es :) Es war tatsächlich überraschend einfach! # Grafiken müssen haben: "position: relative" anstelle von "position: absolute" – Wojciech

+4

Sie können Ihre Fragen beantworten und akzeptieren, also stellen Sie sicher, dass Sie Ihren Kommentar als die richtige Antwort hinzufügen, damit die Fragen gelöst/geschlossen werden –

Antwort

1

Gelöst es :) Es war tatsächlich überraschend einfach! #graphics muss haben: "position: relative" anstelle von "position: absolute"