javascript - グーグルマップスタイルのスクロールは誰ですか？

Question

Googleマップが機能するのと同じように、画像をスクロールできるJavaScriptプラグイン（できればjQuery）を探しています。

画像をドラッグ可能にすることはできますが、親divが。であっても、ドラッグ中に画像全体が表示されoverflow:hiddenます。

どんな助けでも大歓迎です！

score 10 · Accepted Answer

（私はこの死んだパーティーに遅れましたが、ねえ、検索でこのページを見つけたので...）

mooware によって提案された Scrollview プラグインが機能しませんでした。

ただし、Dragscrollableは行いました: http://plugins.jquery.com/project/Dragscrollable

score 3 · Accepted Answer

私はパーティーに少し遅れるかもしれませんが、私は同じものを探していました. 私がつまずいたのはjqueryのスクロールビューです。これは完璧に機能し、オーバーフローしたdivに対してまさにこのGoogleマップのようなドラッグツースクロールを行います。

score 3 · Accepted Answer

Google Maps Image Cutterを確認してください。画像やデジタル写真を撮影して、Google マップに表示されるタイルにカットできます。必要なことをすばやく行う方法かもしれません...

score 2 · Accepted Answer

あなたはグーグルマップAPIを使うことができます...彼らはあなたがカスタム画像でそれを使うことを可能にします。また、コントロールを表示するかどうかを選択できます。

編集：これを行う方法についてのまともなチュートリアルを見つけました。 http://mapki.com/wiki/Add_Your_Own_Custom_Map

score 2 · Accepted Answer

基礎となるテクノロジーの適切な説明については、Pragmatic Programmers' book Pragmatic Ajaxの第 4 章 (私の記憶が正しければ) を参照してください。

画像のスライスとダイシングがカバーの下でどのように機能するかがわかります。そしてズーミング。

score 1 · Accepted Answer

これは JavaScript とはあまり関係がなく、CSS コーディングと関係があります。

HTML と CSS だけでいくつか実験して、画像が適切にクリップされるようにしてから、javascript を追加して画像を移動させます。

HTML でクリップできない場合、または JavaScript で移動できない場合は、問題の最も簡単なデモをここに投稿してデバッグしてください。

コードがなければ、暗闇で撮影しています。

score 0 · Accepted Answer

Googleマップは、ブロックにスライスされた画像を使用します。これらの画像は、ユーザーがさまざまな方向にパンすると動的に読み込まれます。Google Maps ImageCutterのPaulDixonが言及しているのは、このために必要なツールです。

画像をブロックにスライスするという複雑さを増すのではなく、1つの大きな画像をパンするだけの場合は、CSSオーバーフロープロパティを使用する代わりに、clipプロパティを使用する必要があります。これは、私が正しく覚えていればIE4まで、考える価値のあるすべてのブラウザーでサポートされています。

注意点：CSS2.1仕様は、rect値がコンマで区切られた例を示しています。ただし、これはIE6ではサポートされていません（おそらくIE7でもサポートされていません）。ただし、他のすべてのブラウザは、コンマなしのバージョンを理解します。だから代わりに

clip: rect(5px, 40px, 45px, 5px);

あなたが使用する必要があります

clip: rect(5px 40px 45px 5px);

互換性のため。

コンテナ<div>を<img>要素の周囲のposition：relativeに設定し、次にそれをposition：absoluteに設定する必要があります。

したがって、基本的な手法は、ユーザーがドラッグするときに上と左の値を更新し、これらをビューの定義された幅と高さとともに画像に使用して適切なrect（）文字列を作成し、上、左、およびクリップを更新することです。 <img>要素のスタイルプロパティのプロパティ。

私がしたことをしないで、rect（）文字列の値の後の「px」を省略してください。なぜそれが機能しなかったのかを理解するのに何年もかかりました:-)

7 に答える 7