- 締切済み
画像をダブルクリックでスムーズに拡大する方法
いつもお世話になります。 画像をダブルクリックした際、スムーズに拡大したいと考えています。 また、拡大後再度ダブルクリックでこんどは縮小をしたいと考えています。 DOM（？）でimgタグのwidthとheightにアクセスしようと考えています。 ・拡大 ・縮小 ・スムーズ Q.この一連の動作を実装するにはどういった関数を使用すればいいでしょうか？ 当方素人なもので的外れなところがあるかもしれませんが、よろしくお願いいたします。
- rivalknockout
- お礼率91% (42/46)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 height:100%ってちゃんと100％になるんでしたっけ？ とりあえず、適当に変化するサンプルを作ってみました。（ご質問と違うかも知れませんが…） 初期状態のサイズが取得できないとエラーになるかも知れません。（そのときはdivに数値のサイズを与えてみてください） （全角空白は半角に） <!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"> <script type="text/javascript"> <!-- /*@cc_on@*/ (function(){ //速度設定 var turnaround = 1500, interval = 30; //パラメータ var div = turnaround/interval; var count = 0, intervalId; var data = [ [200, 200], [800, 300], [400, 800], [200, 200] ]; var supervisor = function(evt){ var d, t = evt./*@if(1)srcElement @else@*/target /*@end@*/; if(t.id!="box1" || intervalId) return; if(d = data[count++]) changer(t, d[0], d[1]); else alert("no more changing!"); } //アニメーション処理 var changer = function(node, ew, eh){ var w = node.clientWidth, h = node.clientHeight; var dw = (ew - w)/div, dh = (eh - h)/div; var round = 0, flag = false; intervalId = setInterval(function(){ w += dw, h += dh, round += interval; if(flag=(round>turnaround)) w = ew, h = eh; node.style.width = (w | 0) + "px"; node.style.height = (h | 0) + "px"; if(flag){ clearInterval(intervalId); intervalId = null; } }, interval); } //イベント設定 document./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/'click', supervisor, false); })(); //--> </script> </head> <body> <div id="box1" style="width:100%; height:100%; background:#ccc;"> click! </div> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
＞・拡大 ・縮小 基本的にどちらも同じで（設定する値が違うだけ）、img要素のサイズを設定することで可能です。 サイズの指定は、 element.style.width/height などで。 ＞・スムーズ いわゆるアニメーション的な方法をとればよろしいかと。 要はパラパラ漫画と同じで、短い間に少しずつサイズ（又は位置や色など）を変えていくという手法です。 繰り返して同じ処理をすることになるので（値は変わりますが）、setIntervalやsetTimeoutを利用して同じ関数を呼び出すと言う方法になることでしょう。 繰り返しの時間間隔や1回の処理での値の変化量によってアニメーションの速度を変えることが可能ですし、滑らかさもこれらによって変わってきます。 実は、サンプルを作ろうかと思ったのだけれど、どのような動作なのかよくわからないので考え方のみとなりました。 そのままの表示位置で単に拡大縮小すればよいのか、その倍率は画面サイズと関係なく一定倍率とか？ あるいは、オリジナルとは別に画像のコピーを作成して、フロートさせたような状態で画面サイズの8～9割くらいに表示するとか？ 後者であれば、lightboxとかcolorboxなどのライブラリの動作とほとんど同じですから、もし使うのが目的であればそのようなライブラリをそのまま利用したほうが早そうです。作るのが目的であるなら、それらのソースを参考にできるかもしれません。
補足
具体的でわかりやすいです！！なるほど関数を繰り返してアニメーションさせることができ、 またアニメーションの速度も変えることもできるんですね！ もうひとつお訊きしていいでしょうか？ 次のDIVボックスを幅200px高さ200pxにアニメーションする場合はどうなるでしょうか？ <div id="box1" style="width:100%; height:100%; background:#ccc;"></div>