Re: ジャバスクリプトの遊び ( No.1 ) |
- 日時: 2007/05/04 07:09
- 名前: りり
- URL: http://doratomo.ddo.jp/todos/lily/gif.html
- この私のアバターが動いているのが、ジャバスクリプトの下の記述です。
<IMG id="img" src="lily.gif" style="POSITION: absolute; TOP: 2445; LEFT: 40"> <SCRIPT language=JavaScript> <!-- moveX = 1; function moving(){ X=img.style.pixelLeft; if(X <900) img.style.pixelLeft = X + 10; img.style.pixelTop = 485 } setInterval("moving()", 50); //-->
if(X <900)なので、横1024ピクセルの画面で、左から、900ピクセルの位置で止まります。 横、X + 10; 10ピクセルずつ横移動しています。
img.style.pixelTop = 485 縦位置です。数字が大きいほど下に行きます。
setInterval("moving()", 50); 動きの速さです。
|
Re: ジャバスクリプトの遊び ( No.2 ) |
- 日時: 2007/07/11 06:50
- 名前: りり
- URL: http://doratomo.ddo.jp/todos/lily/slide.htm
- ジャバスクリプトでつくるスライドショー
こんな記述で連番でファイル名を付けた画像を表示していけます。
<TITLE>スライドショー</TITLE> <SCRIPT Language="JavaScript"> <!-- Num = 1; // 現在のページ数 maxPage = 4; // 最大ページ数 // 次のページへ function next() { if (Num++ >= maxPage) Num = 1; document.myImage.src = "jpeg/"+Num+".jpg"; } // 前のページへ function prev() { if (Num-- <= 1) Num = maxPage; document.myImage.src = "jpeg/"+Num+".jpg"; } // --> </SCRIPT> </HEAD>
jpeg/"+Num+".jpg";
jpegフォルダーの中の /"+Num+".jpg"; 1.jpgから順番に次へで表示します。
|
Re: ジャバスクリプトの遊び ( No.3 ) |
- 日時: 2007/07/14 11:49
- 名前: りり
- URL: http://www.geocities.jp/maiko3377/bizinnga.html
- マイコさんが画像を表示効果を付けて出していくページを紹介くださいました。
これは、IE自体がJavaScriptのフィルタを解釈して表示するんですねー
おもしろいです。
で、マイコさんのスクリプトでは、
trans.filters(0).Transition = curtrans curtrans++ if(curtrans > 15) curtrans = 0 trans.filters(0).Apply() document.all("child" + current).style.visibility = "hidden" current++ if(current > 6) current = 1 document.all("child" + current).style.visibility = "visible" trans.filters(0).Play()
画像五枚に対して、表示効果は、0から15までの16種類
順番に出していくようになっています。
そこで、こんな風に、画像の枚数と表示効果の種類数を合わせると、いつも同じ画像が同じ効果で現れます。
http://doratomo.ddo.jp/todos/maiko3377/bizinga/bizin.html
表示効果は、 http://user1.matsumoto.ne.jp/~goma/js/filterz2.html
Reveal Transition 0〜23まで23種類の効果がある。24番目(23)はランダム。
表示効果スクリプトは、0番から順に使っていって、限度に達したら、また0番に戻るようになっています。
これを画像ひとつひとつに対して 0〜23まで23種類の効果のどれにするか、画像の雰囲気や中身に合わせて指定するのも、面白いかもしれませんね。
|
ジャバスクリプトで画像を動かす ( No.4 ) |
- 日時: 2007/11/18 19:10
- 名前: りり
- http://doratomo.ddo.jp/todos/lily/xmas.htm
このサンタは、11.gifで
IMG id="img" src="11.gif" style="POSITION: absolute; TOP: 485; LEFT: 40"> これが最初の位置
<SCRIPT language=JavaScript> <!-- moveX = 1; function moving(){ X=img.style.pixelLeft; if(X <680) img.style.pixelLeft = X + 10; img.style.pixelTop = 485 } setInterval("moving()", 50); //-->
これが動き方と速さ X軸方向に10ずつ移動させています。 X + 10 関数ですね。 if(X <680) 横680の位置で止まります。
|
ジャバスクリプトで画像を動かす ( No.5 ) |
- 日時: 2007/11/18 19:15
- 名前: りり
- http://doratomo.ddo.jp/todos/lily/index.html
蝶の動き方 適当に関数式や数値を入れかえて、いろいろ試していたら、ああいう感じになった‥‥
!-- moveX = 1; function moving(){ X=img.style.pixelLeft; if(X<100) img.style.pixelLeft=X+1; if(X>=100) img.style.pixelLeft=X-100;
img.style.pixelTop =700-60*Math.sin(X)*Math.sin(X)-5*X; } setInterval("moving()", 50);
蝶の最初の出だしの位置がこれ。 <IMG id="img" src="flyinganim111.gif" style="LEFT: 10px; POSITION: absolute; TOP: 700px">
|
Re: ジャバスクリプトの遊び ( No.6 ) |
- 日時: 2007/11/19 19:53
- 名前: みかん
- javascriptのソース見ましたが、難しくてさっぱりわかりません。
で、わけもわからずソースだけコピーして貼り付けてみました。 変更する箇所があれば教えてください。 アニメはまねをして作ってみましたが、写真なので大きくなりました。150x115です。 http://1st.geocities.jp/remon1st/sora2.html
|
Re: ジャバスクリプトの遊び ( No.7 ) |
- 日時: 2007/11/19 19:58
- 名前: みかん
- あらら〜〜、
自分のパソコンでは蝶はちゃんと舞いながら上に上がっているのですが、webでは下の方でくるくる回っているだけです。 どうしてでしょうか? どうしたらいいのでしょうか? yahooの広告が邪魔しているのかしら?
|
Re: ジャバスクリプトの遊び ( No.8 ) |
- 日時: 2007/11/19 21:27
- 名前: りり
- URL: http://doratomo.ddo.jp/todos/check/check.cgi
- まあー、さっそくーーー、
みかんさん、手早いですねーーーー
うちでは、ちゃんと舞いながら上に上がっていますよ。
無線をお使いですし、また回線速度が遅いと、動きが見えない部分が出るかも。
もし、有線が使えたら有線で、または、お友達など、別の接続環境の方に様子を聞いてみるとよいかと思います。
|
Re: ジャバスクリプトの遊び ( No.9 ) |
- 日時: 2007/11/19 21:33
- 名前: りり
- URL: http://doratomo.ddo.jp/todos/check/check.cgi
- あっ、うちでも、他のPCで、下でくるくる回っている現象が出ました。
で、ページの更新をしたら、舞い上がりました。
画像が重いので、ページを開いたばかりでは、間に合わないことがあるのかも‥
一度、表示して、画像が、キャッシュに入ればいいのかも。
|
Re: ジャバスクリプトの遊び ( No.10 ) |
- 日時: 2007/11/22 16:08
- 名前: みかん
- りりさん、有難うございました。
ときどきスムーズに動かないときもありますが、おおむね動きますので満足しています。 蝶が大きすぎたかしらね。
マイコさんの画像変化も素敵だったのでマイコさんのソースと、りりさんのjavascriptをコピーしてチャレンジしてみました。 最初の画面で画像が無くて、なんだかさびしいのですが、何か足りないのでしょうか? http://1st.geocities.jp/remon1st/hennka5.html
また、javascriptはジオクリエーターのどこで入れたらいいのかわからなかったのでHTMLで適当に入れましたが、ジオクリエーターの編集画面からは入れられませんか?
|