OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
締切り
済み

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

  • 困ってます
  • 質問No.244984
  • 閲覧数365
  • ありがとう数1
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 65% (27/41)

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

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

どなたかお知恵をお貸しください。お願いします。
通報する
  • 回答数3
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

回答 (全3件)

  • 回答No.1
レベル8

ベストアンサー率 58% (18/31)

こんにちは~ 自分の下手なスクリプトでご回答します! あくまでもほんの一例として受け止めてくださいませ! --------------------------------------------------- <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- i = 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属性は変えると動かなくなるので‥‥


  • 回答No.2
レベル8

ベストアンサー率 52% (18/34)

ごめんなさい、JavaScriptではありませんが、HTML+TIMEというものを使用すると簡単に出来ます。 ただし、IE5.5以上に限定します。他ブラウザでは表示されません。 <HTML XMLNS:t="urn:schemas-microsoft-com:time"> <HEAD> <TITLE>HTML+TIME</TIT ...続きを読む
ごめんなさい、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>

下記サイトに大変多くのサンプルがあります。
  • 回答No.3
レベル10

ベストアンサー率 37% (38/101)

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

http://www.dynamicdrive.com/

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

 ブラウザーに依存しない仕様なので嬉しい(?)ですね。頑張って下さい。
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ