このページでも、フェードインが使われています。 1 6進数に変換しているので、MSIE 3.0でも表示可能です。 フェードイン速度を調節することもできます。 |
<SCRIPT language="JavaScript"> <!-- hexa = "0123456789abcdef" function changehex(num){ return hexa.charAt(num) } function hex(i) { if (i < 0) return "00" else if (i > 255) return "ff" else return "" + changehex(Math.floor(i/16)) + changehex(i%16) } function setbgColor(r, g, b) { var hr = hex(r); var hg = hex(g); var hb = hex(b); document.bgColor = "#"+hr+hg+hb } function fade(sr, sg, sb, er, eg, eb, step) { for(var i = 0; i <= step; i++) { setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)), Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb * ((step-i)/step) + eb * (i/step)) ); } } fade(255,255,255,255,0,0,80) //ユーザー設定箇所 fade(255,0,0,255,255,255,80) //ユーザー設定箇所 // --> </script>
はじめに文字列hexaを定義して、16進数を作るための文字列を作ります。
charAt()メソッドでその文字列からnum番目の文字を取り出すことで16進数へと変えます。(先頭から0,1,2,,という順番になります)
関数 fadeで赤、緑、青の値を計算しています。
ユーザー設定箇所は、スタート時の赤、緑、青の値、終了時の赤、緑、青の値、ステップ数の値 の順番になります。
色の値は0から255までで設定します。いろいろ変えてみてください。
なお、フェードイン速度はコンピュータの処理速度によりだいぶ異なります。必要以上に大きな値を入れると速度の遅いマシンのユーザーがかわいそうです。この設定では MMX Pentium166MHzで0.5秒、Pentium75MHzで 3秒程度です。
[98.04.12追記] 上に書いたフェードイン速度は、Netscape3.0/MSIE3.0での値です。4.0ブラウザの場合、JavaScriptの処理速度は極めて遅くなります。
[2000.03.13追記] このスクリプトを HEAD中に書くと、IE5.1では動作しないようです。
BODYの直後に書くようにしてください。
また、背景画像があるとできないようです。
[★高収入が可能!WEBデザインのプロになってみない?!
自宅で仕事がしたい人必見!
]
[ CGIレンタルサービス | 100MBの無料HPスペース | 検索エンジン登録代行サービス ]
[ 初心者でも安心なレンタルサーバー。50MBで250円から。CGI・SSI・PHPが使えます。 ]
FC2 | キャッシング 花 | 出会い 無料アクセス解析 | |