こんにちは。
今回ご質問させていただきたいのは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と関連する良く見られている質問

Q添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラ

添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラーしか出た事がないのですが

Aベストアンサー

他の回答者様の記入通り、拡張子が無い事には判断出来ません。
また、クリックしてもエラーとありますが、webから探すとか出ませんか?
憶測ですが、多分質問者様のPCにこのファイルを開くアプリケーションが
インストールされていないのではないかな?って思います。
参考までに
よくありがちなのは、XPで作ったエクセルファイル等(逆だったかな^^;)を
ビスタのPCで見ると似たようなアイコンになります。
オフィスの互換パックをインストールすると見れます。

Q自身のウィンドウをサブウィンドウとして開くJS

JavaScript初心者です。
sampleA.htmlというのがあってボタンのリンクとしてopen1.htmlを指定してあります。
sampleAのボタンを押せばopen1.htmlを開くようにします。
sampleAのほうにはJavaScriptを入れず、open1にJavaScriptを入れて
open1自身をサブウィンドウの形で小さいサイズで開きたいと思っています。
open1.htmlのほうにresizeToなどでサイズ指定し、sampleA.htmlのほうで
_blankのターゲットを入れてもウィンドウの新しいタブで開いてしまって
サブウィンドウは開きませんでした。
ネットで調べるとsampleA.htmlのほうにJavaScriptを入れればうまくできるようですが、
sampleA.htmlのほうにJavaScriptは入れずopen1.html自身のJavaScriptで
開くようにしたいと考えていますが・・。
ご存知の方、ぜひともご教授ください。
よろしくお願いいたします。

Aベストアンサー

よくわからないけど
openA.htmlを
window.openで開きなおしたいってこと?

openA.htmlの先頭で
openerのlocation.hrefが
sampleA.htmlならば
window.openで自分自身を開いて
閉じればいいわ

Q右クリで画像保存が出ない!

画像を取りたくて矢印を画像に置くと!手のマークに代わり!右クリができなくなりました。
どうしたらよいのでしょうか?

Aベストアンサー

最近のサイトでは著作権の問題もあり、勝手に保存ができないように右クリックができないように設定しいるところが多くなっているであります。法律に抵触する場合もあるであります。

方法としては、色々あるでありますが、ただ見えてる画像が欲しいのであれば、プリントスクリーンでPC画面全体をコピーして、ペイントソフトにペースト、余分な部分を削除して保存すればいいと思うであります。

プリントスクリーンはググってほしいであります。

Q子ウィンドウを常に手前表示、親ウィンドウは操作させない

まず親ウィンドウから、子ウィンドウを新しく開きます。
そして、子ウィンドウを常に手前で表示させて、親ウィンドウは触れない、というPAGEを作成したいのですがわかりません。
どなたか教えてください。

Aベストアンサー

「モーダル」で検索してみてください。

1度ひらいた子ページを閉じるまで他のページの操作をできなくされることを言います。

ちなみに逆は「モーダレス」です。

Q 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思

 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思います。着衣・水着・スカート、なんでもOKです(あまり小さいサイズじゃない方がよいです)。どうぞよろしくお願いします。

Aベストアンサー

こちらに数点ありました。
http://bsearch.goo.ne.jp/image.php?UI=web&TAB=web&STYPE=0&CC=1&SCRDEF=0&IMGST=0&IMGSZ=0&IMGC=3&IMGFT=0&IMGFT=1&IMGFT=2&IMGFT=3&MOVPT=0&MOVFT=0&MOVFT=1&MOVFT=2&MOVFT=3&AUDPT=0&NSDP=1&KWDP=1&DC=20&FR=1&SM=mc&OCR=1&SITE=&SITE2=&SITE3=&SITE4=&SITE5=&SITEH=&AUDST=0&AUDMST=0&MOVTHN=0&QGR=1&MOVSC=0&NOJSB=0&QGA=1&NOJS=0&AUDSITE=0&MT=%CD%A7%B6%E1&button=%B2%E8%C1%FC%B8%A1%BA%F7
画像を使用される場合は自己責任でお願いします。

Qサブウィンドウのリンクに応じて親ウィンドウのセレクトメニューにデータを反映させる

よろしくお願いします。

子ウィンドウ側の地下鉄南北線という文字リンクをクリックすると
00:北24条駅","01:札幌駅","02:大通駅"が親ウィンドウのセレクトメニューに反映されるように変えたいのです。下記のスクリプトを使ってどのように親ウィンドウと子ウィンドウに分ければいいのでしょうか?
駅名の数はそれぞれのリンクによって違います。

<html>
<head>
<title>セレクトメニューで選択したものに応じて2つめのセレクトメニューに反映させる</title>
<script language="JavaScript" type="text/JavaScript">
<!--
var data = new Array(":交通",":地下鉄南北線",":地下鉄東西線",":地下鉄東豊線");
var data0 = new Array(":---");
var data1 = new Array("00:北24条駅","01:札幌駅","02:大通駅");
var data2 = new Array("10:西18丁目駅","11:西11丁目駅","12:大通駅","13:バスセンター前","14:東札幌");
var data3 = new Array("20:札幌駅","21:大通駅","22:豊水すすきの");

function SetList(objid, arr){
var obj = document.getElementById(objid);
for(i=obj.length; i>=0; i--){ obj.options[i] = null; }
for(i=0; i<arr.length; i++){
var a = arr[i].split(":");
obj.options[i] = new Option(a[1], a[0]);
}
}
//-->
</script>
</head>
<body onLoad="SetList('sel0', data);">
<form name="form1">
<select id="sel0" name="sel0" style="width:160px;" onChange="SetList('sel1', eval('data' + this.selectedIndex))">
<option>---</option>
</select>
<select id="sel1" name="sel1" style="width:160px;">
<option>---</option>
</select>
</form>
</body>
</html>

どなたか教えていただける方がいましたらどうぞよろしくお願いいたします。

よろしくお願いします。

子ウィンドウ側の地下鉄南北線という文字リンクをクリックすると
00:北24条駅","01:札幌駅","02:大通駅"が親ウィンドウのセレクトメニューに反映されるように変えたいのです。下記のスクリプトを使ってどのように親ウィンドウと子ウィンドウに分ければいいのでしょうか?
駅名の数はそれぞれのリンクによって違います。

<html>
<head>
<title>セレクトメニューで選択したものに応じて2つめのセレクトメニューに反映させる</title>
<script language="JavaScript" type="text/Ja...続きを読む

Aベストアンサー

子ウィンドウで文字リンクをクリックした時に
window.opener.関数名
で親ウィンドウの関数を呼べば良いと思います。
親ウィンドウの関数は
function fromChildWindow(flg)
として、子ウィンドウで呼ぶときにflgに選択したリンクを示す値を入れれば良いと思います。
後は、親ウィンドウの関数でflgを使って処理を行えばよいと思います。

私などより全然きれいなスクリプトのソースですね。
こっちも勉強になりました。

Q●「美人アプリ」の画像を保存したい!

●「美人アプリ」というアプリを使用しています。

●ここで表示される画像を保存したいのですが、方法がわかりません。可能かどうかも。。

●もし、方法をご存知の方がいらっしゃいましたら教えていただけませんか?おねがいします。

Aベストアンサー

保存したい画像を表示させて、↓の方法で画面をキャプチャすると、写真アルバムから見れます。
http://blog.livedoor.jp/sakusakupocky/archives/50263981.html

Q横並びの画像を3枚時間差でフェードインさせたいです

すみません。。一度同じ質問をさせていただいたのですが

横並びの画像を3枚時間差でフェードインさせたいのですが
サンプルがどこにも見当たらず。。
どなたかご教授いただける方何卒よろしくお願いいたします・・!!
前回の質問ではIEしか対応しておらず、Firefoxとクロームでも対応させたいと思っております。

Aベストアンサー

エスパーです。^^;

あなたの さいてきちは、いかです。
var myspd = 25;
var myx = 10;

がぞうの さいずが おおきようなので りさいずします。
ぶらうざに ひょうじされる 画素数と 元の がぞうの 画素数を おなじに します。

/*
もしかのうであるのならば、
ういるす駆除けいの、ソフトをとりさります。
もっとも おすすめしたいのが、さいそくのマシンにこうかんすることです。

あと、わたしへの「ありがとうポイント」を MAX に!
(もちろん、じょうだんですが。)
*/

Q右クリ禁止のサイトの画像を保存

質問の通りなのですが右クリック禁止のサイトの画像を保存できるようにする方法はないでしょうか?あと、よく海外でおもしろ動画とかを見せてるサイトがありますが、そういった動画を保存する方法はありますか?重ねて質問すいません^^;

Aベストアンサー

そのサイトを見ないとなんとも言えませんが、
JAVAをオフにしてみると右クリック禁止がはずれる事もあります。

それで駄目ならば、プリントスクリーンを取って画像を修正してください。
まぁ画像を持ち出されたくないサイトならばあまり持ち出さないほうがよろしいかと思います。

ちなみに動画を保存する場合は専用のソフトなどが必要。

Qスクロールと同じように画像や文字を移動させる

よろしくお願い致します。

ハンゲーム
http://www.hangame.co.jp/

の用にスクロールさせると下のメニューや右の画像を移動させたいと思っているのですが、検索するのに使う言葉も思い浮かびません。

このように同時に移動させているサイトを良く見るので参考サイトなどもあると思うのですが、一向に見つかりません。

ご存知の方がいらっしゃいましたら是非ご教授お願い致します。

Aベストアンサー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function F1() {
v='.pixelTop=';dS='';sD='.style';y='document.body.scrollTop';}
function F2() {
obj='obj1';yy=eval(y);eval(dS+obj+sD+v+yy);setTimeout('F2()',10);}
</script>
</head>
<body onload="F1();F2();">
<div
id='obj1'
style='position:absolute;left:0px; top:0px;'>
どこまでも付いてゆきます下駄の雪
</div>
<script type="text/javascript">
for(var i=0;i<100;i++){document.write('<br>')}
</script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function F1() {
v='.pixelTop=';dS='';sD='.style';y='document.body.scrollTop';}
function F2() {
obj='obj1';yy=eval(y);eval(dS+obj+sD+v+yy);setTimeout('F2()',10);}
</script>
</head>
<body onload="F1();F2();">
<div
id...続きを読む


人気Q&Aランキング

おすすめ情報