大きな画像のある一部分だけを表示させ、滑らかなに移動するものが作りたいです。
Google mapsのスライドの仕組みと同じものです。Google mapsはAjaxを使っていますが、
非同期でダウンロードはしません。事前にクライアントにあるものだけを使いますので、
そこまでがいりません。ただのJavaScriptレベルの話しだと思います。
<div>のabsoluteの座標をずらせば、なめらかに動きますが、見えている範囲が同じなので、
これはなしですよね。
iframeを使うのもなしです。Google mapsは使っていませんよね。
どなたかアドバイスしていただける方はいないでしょうか。
No.1ベストアンサー
- 回答日時:
google mapsを調べてはいませんが、画像の一部を表示しておいて、その表示位置が移動できればよいということだと解釈しました。
大きな画像の親要素にサイズを設定しoverflow:hiddenにしておくことで部分表示が可能になります。
その上で画像用をの表示位置をtop、leftなどで制御してあげればよいのではないでしょうか?
例えば
<div id="map_frame">
<img src="Map.jpg" alt="map">
</div>
というマークアップに対して、CSSで
#map_frame{
position:relative;
width:300px;
height:300px;
overflow:hidden;
}
#map_frame img {
width:1000px;
height:1000px;
position:absolute;
top:-300px;
left:-300px;
}
みたいな方法で画像の一部分を表示できますので、これに画像の位置をスライドさせるようなUIを追加してあげればよろしいかと。
(最終的には、画像のtop、leftを制御してあげればよい)
同じような方法ですが、CSSのclipを利用しても同様のことが可能です。
http://w3g.jp/css/display_position/clip
http://www.htmq.com/style/clip.shtml
googleの場合も表示に関しては、多分、似たような方法ではないかと想像します。
表示するための地図が大きいので、全体をあらかじめ沢山の矩形に分割してあって表示に必要な部分を読み込んで張り合わせて表示しているようです。ドラッグなどで移動してその読み込んであるデータの範囲外に出ると、Ajaxでデータを追加取得しているように思われます。(推測なので、確認はしていません)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Google Maps Google Maps にお店の名前を表示する方法は? 2 2022/12/26 16:21
- その他(IT・Webサービス) パソコンで作ったパワーポイントをipadで 2 2023/04/19 15:24
- Google Maps 沖縄の宮古島と橋でつながる来間島のGoogleストリートビューに写る飛行物体・・・これは何ですか? 2 2022/04/13 18:17
- Chrome(クローム) 【Google】「同期は有効です」と表示されているがブックマークが同期されていない 2 2022/11/17 13:32
- Google Drive Googleスライドについて 1 2023/05/01 00:11
- その他(ソフトウェア) Googleドライブの使い方が分からないのですが、公式に質問できるような所も見つからないのでこちらで 1 2023/08/11 20:42
- その他(パソコン・スマホ・電化製品) 他人のパソコンに自分のgoogleフォトアプリを入れて 家にずっと使ってないパソコンがありました。旦 3 2022/10/01 12:02
- その他(コンピューター・テクノロジー) 下に書いたの条件でgoogleアカウントの復旧方法等を教えてください。 1 2023/02/06 23:32
- Android(アンドロイド) [Android]Googleフォトが端末容量圧迫しています。内部ストレージを開けたい。 2 2022/03/30 10:00
- バックアップ バックアップと同期について 1 2023/01/13 07:07
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScript スライドの画像にリ...
-
Gifアニメ、最後のコマに行った...
-
ボタンをクリックした時に、キ...
-
HTMLで条件分岐はできますか?
-
簡単に画像を自動切替できるJav...
-
1枚の画像をクリックすると複数...
-
曜日と時間を指定して表示画像...
-
jQuery FlexSliderのカルーセ...
-
javaを使ってマウスオンでの画...
-
マウス追従スクリプトについて
-
textareaに画像を表示したい
-
MAX関数を使ってからLEFT JOIN...
-
Javascript初心者|jQueryの.va...
-
jspでcssが読み込めない
-
画像の座標位置取得
-
htmlの記述で link rel=styles...
-
キャラクターがぴょこんと飛び...
-
読み込んだQRコードをフォーム...
-
複数の要素へ appendchild でき...
-
eclipseでcssを使うためには?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
HTMLで条件分岐はできますか?
-
1枚の画像をクリックして複数の...
-
Javascript で共通の処理をどこ...
-
JavaScriptとチェックボックス...
-
画像ランダム表示、しかしダブ...
-
Gifアニメ、最後のコマに行った...
-
画像の重なりの順序を代える方...
-
1枚の画像をクリックすると複数...
-
javascriptで毎月替わる画像
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
Javascriptで指定した日付と時...
-
jQueryスライドショー画像への...
-
JavaScript で flexslider の画...
-
lightbox2をiframeから外に表示...
-
重なった画像にクリックイベン...
-
Twitterの埋め込みしたWebペー...
-
画像をフォルダに入れれば表示...
おすすめ情報