画像を指定座標まで移動させたい

締切済

質問者：milktea_
質問日時：2002/04/01 12:17
回答数：3件

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： Ujiki
回答日時：2002/04/28 09:57

　はじめまして。

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

http://www.dynamicdrive.com/

です。(^^)
　その中から、１つ、ご紹介します。
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 …

- 0
- 件

通報する

No.2

回答者： lmeelm
回答日時：2002/04/04 18:31

ごめんなさい、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/

- 0
- 件

通報する

No.1

回答者： howsike
回答日時：2002/04/02 16:31

こんにちは～

自分の下手なスクリプトでご回答します！
あくまでもほんの一例として受け止めてくださいませ！
---------------------------------------------------
<HTML>
<HEAD>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY onload="movesty()">

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

</BODY>
</HTML>

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