JavaScript_javascriptスキルで生成されるダイナミックな雨背景エフェクトの実装方法
May 16, 2016 pm 04:13 PMこの記事の例では、JavaScript で生成される動的な雨の背景効果の実装方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
<頭>
<TITLE>JavaScript によって生成された動的な雨の背景効果</TITLE>
</HEAD>
<BODY bgcolor="#fef4d2" >
<中央>
<スクリプト言語=JavaScript>
<!-- [ステップ 1]: ここで雨滴の数を設定できます -->
var レインサイズ = 40;
<!-- [ステップ 2]: ここで雨の速度を変更できます。値が大きいほど、速度が遅くなります -->
var 速度 = 10;
var x = new Array();
var y = new Array();
var r = 新しい配列();
var cx = new Array();
var cy = new Array();
var doc_width = document.body.clientWidth;
var doc_height = document.body.clientHeight;
for(i=0; i
if (i == 0) {
Document.write("<div id="dot" i "" style="POSITION: ");
Document.write("absolute; Z-INDEX: " i "; VISIBILITY: ");
Document.write("visible; TOP: 15px; LEFT: 15px;"><font color="blue">");
Document.write(",");
他 {
Document.write("<div id="dot" i "" style="POSITION: ");
Document.write("absolute; Z-INDEX: " i "; VISIBILITY: ");
Document.write("visible; TOP: 15px; LEFT: 15px;"><font color="blue">");
Document.write(",.");
}
関数 initRain() {
r[i] = 1;
sn = Math.sin(a);
cs = Math.cos(a);
cx[i] = Math.random() * doc_width 1;
cy[i] = Math.random() * doc_height 1;
x[i] = r[i] * sn cx[i];
y[i] = cy[i];
}
関数 RaindropIE() {
If ((x[i] = (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight }
Document.all["dot" i].style.pixelTop = y[i];
Document.all["dot" i].style.pixelLeft = x[i] }
setTimeout("raindropIE()", 速度); }
関数 updateRain() {
r[i] = 10;
x[i] = r[i] * sn cx[i];
y[i] = r[i] * cs cy[i];
}
関数 makeRain() {
r[i] = 1;
cx[i] = Math.random() * doc_width 1;
cy[i] = 1;
x[i] = r[i] * sn cx[i];
y[i] = r[i] * cs cy[i];
}
RaindropIE();
</スクリプト>
</BODY>
</HTML>
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











トマト無料小説アプリで小説を書く方法. トマトノベルで小説を書く方法に関するチュートリアルを共有します。

Colorful マザーボードに BIOS を入力するにはどうすればよいですか? 2つの方法を教えます

WeChat で削除された連絡先を回復する方法 (簡単なチュートリアルでは、削除された連絡先を回復する方法について説明します)

VirtualBox 固定ディスクをダイナミック ディスクに、またはその逆に変換します

すぐにマスター: Huawei 携帯電話で 2 つの WeChat アカウントを開く方法が明らかに!

モバイルドラゴンの卵を孵化させる秘密が明らかに(モバイルドラゴンの卵をうまく孵化させる方法を段階的に教えます)
