TODOS・何でも情報交換TOPから是非ご覧ください。
一番下の投稿フォームへ > スレッド一覧 > 記事閲覧
ジャバスクリプトの遊び
日時: 2007/02/25 18:40
名前: りり
URL: http://todos.xsrv.jp/lily/calc.htm

他のスレッドでちょっと触れたのですが、

ホームページにJavaScriptを組み込むと、軽く動いて面白いものができます。

特に、ソフトのダウンロードとか必要なく、ブラウザで使ってもらえるし、そういう便利なJavaScriptを組み込んだページもけっこうあります。

URLは、昔作ったJavaScript計算機

電卓だと、打ち間違いが確認できないし…
エクセルでわざわざ計算することもない…
二列づつあるのは、前の計算結果をコピーして次の計算に使えるようにと…

いろいろバリエーションも考えられます。

エクセルのような関数式を、HTMLの中にJavaScriptで記述したもの。

こんな感じで
function tasizan(f) {
f.kazu3.value = eval(f.kazu1.value)+eval(f.kazu2.value)
}

足し算の第一枠eval(f.kazu1.value)と第二枠(f.kazu2.value)に入った数値を
プラス+した結果を次の枠(f.kazu3.value)へ

ここは、引き算-
function hikizan(f) {
f.hiki3.value = eval(f.hiki1.value)-eval(f.hiki2.value)
}

ここは、掛け算*
function kakezan(f) {
f.kake3.value = eval(f.kake1.value)*eval(f.kake2.value)
}

ここは割り算/ とあまり%
function warizan2(v) {
v.wari6.value = eval(v.wari4.value)/eval(v.wari5.value)
v.wari22.value = eval(v.wari4.value)%eval(v.wari5.value)
}

メンテ

*TODOS・何でも情報交換・TOP*<スレッドPage> 最新 | 3 | 2 | 1 |

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で適当に入れましたが、ジオクリエーターの編集画面からは入れられませんか?
メンテ

*TODOS・何でも情報交換・TOP*<スレッドPage> 最新 | 3 | 2 | 1 |

楽しい交流と情報交換のTODOS・アップローダーも用意。ぜひTOPからもご覧ください。
ご参考になりましたら、お気軽に一筆お書き込みくださいませ。
題名 スレッドをトップへソート
名前
画像添付
JPEG
GIF
PNG



参照ボタンを押して、PCの画像を指定ください。3枚まで指定できます。縮小画像はクリックで拡大されます。
パスワード (好きなパスワードを。投稿後、右下のスパナマークをクリックし、そのパスワードを入れて修正できます。)
コメント

   クッキー保存
スレッドTOPへ***スレッド一覧