GoogleMapの様な固定されたエリア内で、ドラッグしてスクロールを可能にする
インターフェースを、前からちょっとやってみたかったので、実験的に試してみました。

使用したライブラリは「jquery.scrollview.js」

jQueryScrollview.jpg
jquery-scrollview – Project Hosting on Google Code

このライブラリを使用することで、GoogleMapと同じ様な
・マウスドラッグでスクロール
・ダブルクリックした箇所にセンタリング
を実現することができます。(ズーム操作は不可)

参考サイトは
jQuery を用いて大きな画像などを Google Map ライクにスクロール表示する UI – Tosshi Note

実装は簡単ですがドラッグエリアをCSSでoverflowをscrollにしないといけないので
エリア自体にスクロールバーが表示されてしまったりなんだか微妙。。。

そこでドラッグエリアの上(スクロールバーの部分のみ)にpositionをabsoluteにした
空のボックスを重ねて強引に消す方法で何となくGoogleMapのインターフェースっぽくなってきました。

結果は以下の様に。(画像をドラッグしてみてください)

応用(?)として枠をiPhoneにしてみる。(得に意味はなし)

画像のデフォルトの配置位置が左上寄せでないのが気掛かり。。。

画像だけでなくコンテンツ、もしくはナビゲーションなどで
おもしろいインターフェースを作れないかな、と考え中。

何かよいアイディアがあれば是非お知らせください。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでGoogleMapのインターフェースを実験

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR