- ベストアンサー
小窓が残像を残して移動
こんにちは。 初めてプログラムを勉強しています。 javascriptを利用して、なんとか小窓表示と移動までは出来たのですが、 残像を残しながら小窓が、任意の位置まで移動する様なプログラムの書き方が分かりません。 宜しくお願いします。
- wowa
- お礼率14% (1/7)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
解説その２： <HTML> <HEAD> <TITLE>小窓移動２</TITLE> <script language="JavaScript"> <!-- var TW=0; function move_W1() { var mX,mY; var dn,ts; TW=TW+1; dn=document.wtest.elements("divnum").value; mX=document.wtest.elements("movetoX").value/dn*TW; mY=document.wtest.elements("movetoY").value/dn*TW; top.moveTo (mX,mY); if(TW>=dn)clearInterval(timerID); } function move_W2(){ var ts; TW=0; ts=document.wtest.elements("tspan").value; timerID=setInterval('move_W1()',ts) } //move_W2(); //--> </script> </HEAD> <BODY> <A onclick="window.close()" target="_blank">閉じる</A> <FORM name="wtest"> 移動先：<X> <INPUT type="text" name="movetoX"><Y><INPUT type="text" name="movetoY"><BR> 分割数： <INPUT type="text" name="divnum" value = "1">回<BR> 更新間隔： <INPUT type="text" name="tspan" value = "1000">ms<BR> <BR> <INPUT type="button" name="start" value = "実行" onclick="move_W2();"> </FORM> </BODY> </HTML> ★★★★★★★★★★★★ 分割数は必ず、１以上を設定してください。 最初にwowaさんが提示されたものは、ウィンドウを表示すると 同時に、移動していましたが、今回のサンプルはボタンを押して 実行するものです。 各要素をJavaScriptに埋め込むことで、ウィンドウ表示と同時 に移動することも可能です。 wowaさん提示のものと、私のサンプルの違いがわかりますでし ょうか？ また、上記サンプルで、各要素を変更してみて、お好みの値を 見つけてみてください。
その他の回答 (2)
- kokorone
- ベストアンサー率38% (417/1093)
解説その１： ご提示されたソースについて解説します。 動作としては、 X:画面右端-200,Y:-570 に移動。 以降、Yを＋２０ずつYが０になるまで 移動しています。 但し、表示の間隔が、 timerID=setInterval('move_W1()',100) の100(ms)となっているため、見た目には、 一瞬で終了してしまいます。 100を増やしていけば、ゆっくり、残像？を 残しながら移動します。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★ 解説２では、最終表示位置・分割数・表示間隔を 自由設定できるサンプルをお見せします。
- kokorone
- ベストアンサー率38% (417/1093)
サブウィンドウ表示と、そのサブウィンドウの移動までは、 できたのですよね。 任意の移動位置は、INPUTで指定するのでしょうか？ まずは、考え方ですが、 一気に指定位置まで移動した場合、残像は残りませんが、 移動距離を何回かに分割して、さらに、分割移動をタイムラグ を使って、時間差移動させれば、残像のように見えませんか？ 出来たところまでのソースを提示していただければ、もっと 詳しく解説します。
補足
こんにちは 書き込みありがとうございます。 <HTML> <HEAD> <TITLE>小窓移動２</TITLE> <script language="JavaScript"> <!-- var TW=-550; function move_W1() { top.moveTo ((screen.availWidth)-(200),TW-20); TW=TW+20; if(TW>0)clearInterval(timerID); } function move_W2(){ timerID=setInterval('move_W1()',100) } move_W2(); //--> </script> </HEAD> <BODY> <A onclick="window.close()" href="http://html-time.com/" target="_blank"><IMG src="banner.gif" border="0" width="88" height="31"></A> </BODY> </HTML> ここまでのソースは、インターネットで見つけることができたのですが、ここから、どうやって改造していったら良いかが分かりません。 宜しくお願いします。
お礼
kokorone様 とても、丁寧に教えていただき、 ありがとうございました。 kokoroneさんから頂いたソースを研究してみます。 また、分からないことがありましたら 教えて下さいネ。