最新閲覧日:

こんにちは。
今回ご質問させていただきたいのはJSで1枚の画像を指定位置まで移動させるにはどうすればよいかということです。

オンロードで画像がウィンドウの上部登場しそのまま下に少し移動させて止まるという動きをさせたいと思っています。

どなたかお知恵をお貸しください。お願いします。

このQ&Aに関連する人気のQ&A

A 回答 (3件)

 はじめまして。

よろしくお願いいたします。
DynamicDrive.com
なるサイトから、よく面白そうなJavaScriptを流用させてもらっております。IEだけしか利用できないもの、NSだけにしか利用できないもの、またブラウザーの種類に依存しないものを明確に案内してくれるのは、いいこと(?)だと思います。

http://www.dynamicdrive.com/

です。(^^)
 その中から、1つ、ご紹介します。
http://www.dynamicdrive.com/dynamicindex11/pathg …
です。「 pathGenerator 」です。英語ですが、利用は簡単です。
1. ページに移動後、マウスの左ボタンを押しっぱなしで画面を適当になぞって下さい。(^^)
2. そして「 Preview 」を押せば、左上の矩形の「 Sample Layer 」が何度でも再現してくれます。
3. 気に入らなければ「 Reset 」して、1.から繰り返します。
4. 満足したら… 「 Get Source Code 」をクリックすれば、別ウィンドーを表示し、座標値を含んだ JavaScriptスースを自動的に生成してくれます。最初の座標値と、最後の座標値を修正したり、追加したり、画面サイズから計算させるなどすれば、迷走しながら目的地に到着するようなことも楽しめそうです。Arrayの勉強にもなりますしね。(^^); Arrayに対してのXY座標値の埋め込みなんだと気が付けば… 幾何学的な、数学的な、解を自動生成してやれば… 画像の移動を様々な規則正しく(?)動かせますよね。なーんちゃって(^^);

 ブラウザーに依存しない仕様なので嬉しい(?)ですね。頑張って下さい。

参考URL:http://www.dynamicdrive.com/dynamicindex11/pathg …
    • good
    • 0

ごめんなさい、JavaScriptではありませんが、HTML+TIMEというものを使用すると簡単に出来ます。


ただし、IE5.5以上に限定します。他ブラウザでは表示されません。


<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>HTML+TIME</TITLE>
<STYLE type="text/css">
.time{behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<IMG id="i0" src="abc.gif" style="left:0;top:0;position:absolute;">
<t:animate id="t0" targetElement="i0" attributeName="top" from="0" to="300" begin="0" dur="1" autoReverse="false" />
</BODY></HTML>

下記サイトに大変多くのサンプルがあります。

参考URL:http://ad.il24.net/~ura/
    • good
    • 0

こんにちは~


自分の下手なスクリプトでご回答します!
あくまでもほんの一例として受け止めてくださいませ!
---------------------------------------------------
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
i = 0 ; //画像の初期トップ位置(ピクセル単位)
m_spd = 6 ; //画像の動く距離(ピクセル単位)
t_spd = 100 ; //画像の動く早さ(1/1000秒単位)
max = 400 ; //画像の終点位置(ピクセル単位)

function movesty() {
lay01.style.top = i ;
if(i >= max) i = max
else i += m_spd
window.setTimeout("movesty()", t_spd) ;
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="movesty()">

<DIV id="lay01" style="position:absolute; left:50">
<IMG SRC="bus.jpg">
<DIV>

</BODY>
</HTML>

---------------------------------------------------
対応ブラウザはIEのみということで(苦笑)
画像は<BODY>内の<IMG>タグで指定して下さい!
<DIV>のid属性は変えると動かなくなるので‥‥
    • good
    • 0

このQ&Aに関連する最新のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード


このカテゴリの人気Q&Aランキング

おすすめ情報

カテゴリ