説明 ◆合体◆
◇同じ変数と複数のonloadについて ◆合体・メニュー
たとえば、『スライドショー』と『画像降る上る』の二つのJavaScriptを合体させたJavaScript。
当サイトでジャンル分けしてある複数のJavaScriptを合わせた、合体技のavaScriptです。
いままでも、『スライドショー』と『動く背景』の合体技とかあったのですが、ジャンル分けが難しくなってきたので、新コーナーを設けました。徐々に増やしていく予定です。
なお、ドキュメント宣言が<!DOCTYPE html>では動かないモノにはHTML5が付いてます。
◆◇◆ このページの背景は、「動く背景・背景作成メニュー」の「背景作成11ブロック並べの背景Dボーダー3変化」です。
色の並べ方」指定は「0」です。 ◆◇◆
◇同じ変数と複数のonloadについて
PCに負担がかかり読み込みが遅くなるので、JavaScrip は多用しないのが基本です。しかし遊びの無いページはクソ面白くもねぇ!というのも、事実です――たぶん(笑)。
複数のJavaScriptを使用する時、注意することが2点あります。
第一は同じ変数を使用しないこと。変数については、JavaScript超初心者によるJavaScript入門の説明をどうぞ。
第二は、同時にJavaScriptを動作させるためのonload記述の方法です。いろいろな方法がありますが、ここでは <body> タグの中に onload="●();●()" と並べて記述する方法を取っています。
なお最近は <body> タグの中ではなく、JavaScript のソースの中に、window.onload=function (){●;●;}と記述しています。(2015/12/06:現在)
、
他に JavaScript を利用していなければ、これらの方法で動作します。動作しない時は、他のJavaScriptのonload方法を調べて、個別に対処して下さい。
並べて記述の方法の説明は JavaC から。それ以外の方法は AIDREAM の説明等が、参考になります。
上記より、さらに修正。
ひとつのJavaScriptのソースの中に、複数のonloadがある場合は、 最近は <body> タグの中ではなく、JavaScript のソースの中に、●();●();と記述するように修正中です。
「window.onload」は、使用しない方がいいらしいので。
そして複数のJavaScriptを使用する場合は、JavaScriptごとに即時関数で囲んで記述するようにしました。
即時関数については、HOMEページの説明をご覧ください。
(2017/06/01:現在)
◆合体・メニュー◆
・Us=USEFUL=便利 ・Sl=SLIDE=スライドショー ・Ms=MOUSE=マウスストーカー |
・Up=UP-DOWN=降る上る ・Fl=FLY=ふわふわ ・Mv=MOVE=動く背景 |
・Ta=TABLE=表(テーブル) ・Fo=FONT=文字 ・Ot=OTHER=その他 |
マウスのスライドショー | ■Mo+Sl■ 『画像1個のマウスストーカー』と『簡単スライドショー』を合体。小さなマウス画像のスライドショーです。 |
マウスのスライドGIFアニメ風 | ■Mo+Sl■ 『画像1個で後追いマウス』と『簡単スライドショー』を合体。マウスのスライド速度が速いので、GIFアニメっぽく見えます。 |
画像が流れるスライド文字入り | ■Up+Sl■ スライドショーの上を画像が流れ、その領域にタイトル文字等を入れたJavaScriptです。 |
画像流れるFスライド文字入り | ■Up+Mv■ フェードのスライドショーの上を画像が流れます。文字入りです。 |
動く背景に泡が上る | ■Up+Mv■ div作成の左端の縦長領域の、下から上へ移動する背景の中で、泡が一緒に上っていきます。 |
動く背景に雪が降る | ■Up+Mv■ div作成の上端の横長領域の、右から左へ移動する背景の中で雪が降ります。 |
左右往復移動背景に3個飛ぶ | ■Fl+Mv+Ot■ 左右往復移動背景画像に3匹の蝶が飛びます。シームレスでない背景画像でも全体(body)表示が可能。グラデーションタイトル文字も合体。 |
ランダム画像とランダム配置 | ■Ot+Ot■ 星空に散らばる星の配置と、星座やUFO等の画像が、ページを開くたびに変化します。 |
背景変更とマウスで動く背景 | ■Mv+Mv■ サムネイル(縮小画像)をクリックして拡大。拡大画像をクリックして、さらに拡大。その拡大画像上でマウスを動かすと、画像が動きます。 |
キラキラ星+電飾ツリー4種 | ■Fl+Ot■ キラキラ星と合体した電飾のクリスマスツリーが、豪華に輝きます。CSSで描いたツリーを画像にして使用した3種とCSSのツリーが1種。 |
フェードのスライド内を浮遊 | ■Sl+Fl■ フェードで切り替わるスライドショーの中を、1個のUFOがふわふわ浮遊します。 |
フェードスライド内複数浮遊 | ■Sl+Fl■ フェードで切り替わるスライドショーの中を、複数の風船がふわふわ浮遊します。2016/01/27:修正 |
Fスライド内複数個別指定浮遊 | ■Sl+Fl■ フェードで切り替わるスライドショーの中を、複数の桜がふわふわ浮遊。浮遊画像は個別指定可能。 |
フェードのリアル時計 | ■Sl+Ot■ フェードのランダムスライドショーの上に、リアルで動作するデジタル時計を合体しました。2015/12/08:修正 |
渦巻く星を一発開閉 | ■Fl+Ot■ 渦巻く星(ブラックホール遠のく)のド派手なJavaScriptがボタン一発で、閉じます。再度押すと、また表示されます。今回の星は遠のかずに、近づきます。 |
瞬く星空と流れ星 | ■Fl+Ot■ 画面一杯にキラキラ瞬く星空に、流れ星が流れます。星空も流れ星も「文字フォント使用」か「画像使用」か、選択することができます。 |
落ち葉の舞う窓 | ■Fl+Mv■ 窓の向こうに舞い踊る落ち葉が見える JavaScript です。窓は「背景作成」の JavaScript です。 |
フェードの装飾付きリアル時計 | ■Sl+Ot■ フェードのスライドショーの上に、リアルで動作するデジタル時計。その周囲をリボン等の画像で装飾しました。 |
フェードの時計カウントダウン | ■Sl+Ot+Mv■ フェードのスライドショーの上に、リアルで動作するデジタル時計。さらにカウントダウンメッセージを追加しました。 |
動く海底のキラキラ魚 | ■Mv+Fl■ 横移動する海底で、魚が発生したり消滅したりするJavaScriptです。横移動はCSSです。 |
枠内で複数魚が泳ぐリアル時計 | ■Fl+Ot■ リアル時計の付いた、複数の魚が枠線で囲まれた領域の中を泳ぐ、範囲指定の JavaScript です。 |
4個を合体 | ■Mo+Ot+Fo+Fl■ 時計のマウスストーカー、CSSのメニュー、タイプ文字、文字吹き出しの4個を合体したJavaScript です。 |