GoogleMapの様な固定されたエリア内で、ドラッグしてスクロールを可能にする
インターフェースを、前からちょっとやってみたかったので、実験的に試してみました。
使用したライブラリは「jquery.scrollview.js」
≫jquery-scrollview – Project Hosting on Google Code
このライブラリを使用することで、GoogleMapと同じ様な
・マウスドラッグでスクロール
・ダブルクリックした箇所にセンタリング
を実現することができます。(ズーム操作は不可)
参考サイトは
≫jQuery を用いて大きな画像などを Google Map ライクにスクロール表示する UI – Tosshi Note
実装は簡単ですがドラッグエリアをCSSでoverflowをscrollにしないといけないので
エリア自体にスクロールバーが表示されてしまったりなんだか微妙。。。
そこでドラッグエリアの上(スクロールバーの部分のみ)にpositionをabsoluteにした
空のボックスを重ねて強引に消す方法で何となくGoogleMapのインターフェースっぽくなってきました。
結果は以下の様に。(画像をドラッグしてみてください)
応用(?)として枠をiPhoneにしてみる。(得に意味はなし)
画像のデフォルトの配置位置が左上寄せでないのが気掛かり。。。
画像だけでなくコンテンツ、もしくはナビゲーションなどで
おもしろいインターフェースを作れないかな、と考え中。
何かよいアイディアがあれば是非お知らせください。。。