A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
#1、#2です。
>ダブルクリックした場所を基点として~
そこまで、読み取っていませんでした。すみません。
#map内の構成がどのようになり得るのかわかりませんが、入れ子がいろいろあると個々の要素に対して座標計算をするのはネストの状態を考慮しなければならないので面倒そうですね。
処理対象が兄弟要素のみであるとか決まっているのなら、簡単な計算ですむのでどちらでも良いですが、もしそうでないのなら、
ラッパーである#mapの位置は全体座標系に対して移動してあげて、残りの要素はラッパーに対しての相対座標(←拡大/縮小比率)で操作してあげることにすれば、処理が比較的簡単になると思います。
この場合、ラッパーがposition:absoluteかrelativeかによっても計算が変わりそうなので、どちらかに決めておいた方が簡単そうですね。
そうしてしまえば、後半はほぼ#2と同じような処理でいけるのではないかと思います。
座標計算するときに、#mapの親要素がoffsetを持っている可能性が考慮されていないみたいですが、body直下に決め打ちでよいのかしらん?
(790とか262や40も決め打ちなのが気になりますが・・・)
例えば(jqueryがよくわかんないけれど)
offset = $("#map").offset();
p_offset = $("#map").parent().offset();
とすれば、移動する結果のleft値は
event.pageX - (event.pageX - offset.left) * ratio - p_offset.left
みたいになるのではないでしょうか。(←検証していません)
「ダブルクリックした場所を基点として~」だと、拡大するほうは問題ないですけれど、縮小する方も同じロジックで処理してしまうと(クリック位置を基点に縮小)永遠に元の位置には戻ってこないことになりそう。
もし、元の位置に戻すのであれば、最初の位置を記憶しておくとかしておいて、縮小処理は拡大とは別処理にしないとならなさそう。(あるいは縮小の場合はクリック位置を逆算して決めるとか・・・)
回答ありがとうございます。
本機能について実装できていませんが、
これ以上時間をさくことができなくなりましたので、
今回はあきらめることにいたします。
ご協力ありがとうございました
No.2
- 回答日時:
#1です。
ライブラリをご利用のようですが、jqueryでしょうか?
jqueryはよく知らないので、かなり適当ですが、似たようなものでごく簡単なサンプルを…
(divとimgだけ対象にするようにしています)
要領のみのサンプルなので、以下のように簡略化しています。
各要素で共通にするために比率で設定。(2倍、1/2倍)
そのままベタで、width、height、top、left、fontSizeの属性のみ変更。
(全角空白は半角に)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#map { position:relative; width:790px; height:262px; }
#map * { position:absolute; }
#map. #map * { left:0; top:0; margin:0; padding:0; }
#map #imgmap { width:790px; height:262px; }
#map .p_div { top:50px; left:100px; background-color:#ff0; }
#map .p { top:100px; left:200px; width:40px; height:40px; }
#map .q { top:200px; left:50px; width:50px; height:20px; }
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
var ratio = 0;
$(function(){
$("#map").dblclick(function(){
ratio = ratio<1?2:0.5;
$("#map div, #map img").each(function(){animator($(this), ratio);});
});
});
function animator(elm, r){
var param = {};
param.width = toNum(elm.width());
param.height = toNum(elm.height());
param.top = toNum(elm.css("top"));
param.left = toNum(elm.css("left"));
param.fontSize = toNum(elm.css("fontSize"));
elm.animate(param, 1000);
function toNum(val){ return (parseInt(val) * r | 0) + "px"; }
}
//-->
</script>
</head>
<body>
<div id="map">
<img id="imgmap" src="map.gif" alt="マップ">
<div class="p_div">test<img class="p" src="hoge.gif" alt=""></div>
<img class="q" src="point.gif" alt="">
</div>
</body>
</html>
回答ありがとうございます。
簡潔明瞭なサンプルいただきまして大変助かります。
>ライブラリをご利用のようですが、jqueryでしょうか?
はい使用しております。
ダブルクリックした場所を基点として、拡大縮小していますのでいただいた
サンプルを元に作成が可能か技術力不足もあり判断つきませんが、
引き続き、コードに反映してみて思考錯誤いたします。
No.1
- 回答日時:
拡大/縮小はスクリプトで行なうってことでしょうか?
という仮定のもとで、例えば対象が<div id="hoge">~</div>内にあるとすれば、それぞれを{ padding:0; margin:0; position:absolute; }でdiv内座標で配置してあるとします。
原則的には、各要素の 座標、サイズ(w、h)、文字サイズ を拡大/縮小の比率に応じて拡大/縮小してあげればよろしいかと。
position:absoluteでなくとも普通のマークアップでも可能だと思いますが、その場合は、行間隔やpadding、marginなど調整すべき範囲が拡大するのでいろいろと面倒になりそう。
また、座標やサイズは連続数ではなくピクセル単位になっているので、何度も拡大/縮小して結果的に元のサイズに戻した時に、計算誤差で若干比率が乱れることが起こり得ます。
これを防ぐには、オリジナルをdisplay:noneなどでどこかに残しておいて、常にそれを元に計算するようにすれば比率がおかしくなることはないでしょう。
とはいうものの、一番手っ取り早そうなのは、全体を一枚の画像にしておいてそれを拡大/縮小するという方法。
これなら、単純に画像のサイズを変えてあげればいいだけなので、計算する必要もありません。
この回答への補足
回答ありがとうございます
回答頂いた内容をソースに反映してみましたが、
うまく動作してくれません。
ご面倒だと思いますが、下記スクリプトでもし
おわかりになるようでしたら、ご指摘いただけますでしょうか。
jQueryを使用して拡大縮小しています。
//画像ズーム用スクリプト
$(function() {
var zoomin = true;
var g_x;
var g_y;
$('#imgmap').dblclick(function(e) {
if (zoomin) {
//マップ
var x = (e.pageX - $(this).offset().left) * 2 - 395;
if (x < 0) x = 0;
if (x > 790) x = 790;
var y = (e.pageY - $(this).offset().top) * 2 - 131;
if (y < 0) y = 0;
if (y > 262) y = 262;
$(this).animate({width: 1580, height: 524, left: -x, top: -y}, 500);
//ポイント←これがうまく動作してくれません
var p_x = (e.pageX - $('#p').offset().left) * 2 - 20;
if (p_x < 0) p_x = 0;
if (p_x > 40) p_x = 40;
var p_y = (e.pageY - $('#p').offset().top) * 2 - 20;
if (p_y < 0) p_y = 0;
if (p_y > 40) p_y = 40;
$('#p').animate({width: 80, height: 80, left: -x, top: -y}, 500);
g_x =p_x;
g_y =p_y;
zoomin = false;
} else {
$(this).animate({width: 790, height: 262, left: 0, top: 0}, 500);
$('#p').animate({width: 40, height: 40, left: g_x, top: g_y}, 500);
zoomin = true;
}
});
});
<!--HTML-->
<div id="map" style="position:relative" width="790" height="262" >
<img id="imgmap" name="imgmap" src="map.gif" STYLE="POSITION:absolute;" alt="マップ" />
<div id="p_div" STYLE="POSITION:absolute;">
<img name="p" id="p" src="point.gif" width="40" height="40" />
</div>
</div>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- デジタルカメラ 録画した4K動画を、フルピクセルで再生したい 5 2023/05/10 00:05
- PDF 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 1 2022/03/31 19:09
- その他(IT・Webサービス) 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 3 2022/03/31 19:11
- PDF 画像調整してスクショし保存した画像を印刷する方法 1 2022/03/31 18:42
- Photoshop(フォトショップ) 【Photoshop】画像拡大時に急激に画面外まで拡大してしまうのを制御したい 1 2023/08/25 03:04
- その他(ソフトウェア) 画像の拡大率を固定したまま次の画像を表示出来るビューアを探しています 2 2022/05/13 17:19
- デスクトップパソコン 画像がキレイなままなのは何故? 5 2022/10/27 07:07
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- 俳優・女優 実物を見たことがないのに、画像から実寸サイズを導き出すことってできるんでしょうか。 このTwitte 1 2023/08/25 19:11
- X(旧Twitter) ツィッターの画像表示について 1 2023/08/17 09:28
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
ランダムで表示させたブロック...
-
セレクトボックスで、リンクバ...
-
マウスオーバーにて画像に虫眼...
-
Colorboxがうまく設置できません
-
画像拡大とともにエレメントも...
-
時間差で画像を動作させたいjav...
-
jQueryでのドラッグアンドドロ...
-
サイトにコンテンツを並べる際...
-
MAX関数を使ってからLEFT JOIN...
-
クリックで色変更後に既に変更...
-
jspでcssが読み込めない
-
JavaScriptでボタンをクリック...
-
曜日と時間を指定して表示画像...
-
JavaScriptで変更した属性の元...
-
画像の下に説明文をつけて切り...
-
innerHTMLに入れたリンクが反応...
-
jQueryを使ってランダムに表示
-
textareaに画像を表示したい
-
「jQuery」アコーディオンメニ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
Javascript初心者|jQueryの.va...
-
画像マウスオーバーで、checkb...
-
アップロードファイルの種類に...
-
複数bxsliderをタブで切り替え...
-
サムネイルにカーソルを合わせ...
-
JavaScriptでの画像切り替えを...
-
時間差で画像を動作させたいjav...
-
「画像クリックで音声再生」を ...
-
JavaScriptでクレイアニメ。ち...
-
マウスオーバーにて画像に虫眼...
-
VBAでIEを動かす場合、下記の①...
-
クリックでクリッカブルマップ...
-
交互に入れ替わる画像を複数配置
-
JavaScript/CANVASでの画像読込...
-
JQueryでオープニングアニメー...
おすすめ情報