ホームページ ウェブフロントエンド jsチュートリアル JavaScript_javascriptスキルで生成されるダイナミックな雨背景エフェクトの実装方法

JavaScript_javascriptスキルで生成されるダイナミックな雨背景エフェクトの実装方法

May 16, 2016 pm 04:13 PM
javascript 動的 方法 生成する 背景効果

この記事の例では、JavaScript で生成される動的な雨の背景効果の実装方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:
<HTML>
<頭>
<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 initRain();
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() {

a = 6;

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() {

for (i = 0; i UpdateRain();
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 プログラミング設計に役立つことを願っています。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

トマト無料小説アプリで小説を書く方法. トマトノベルで小説を書く方法に関するチュートリアルを共有します。 トマト無料小説アプリで小説を書く方法. トマトノベルで小説を書く方法に関するチュートリアルを共有します。 Mar 28, 2024 pm 12:50 PM

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

Colorful マザーボードに BIOS を入力するにはどうすればよいですか? 2つの方法を教えます Colorful マザーボードに BIOS を入力するにはどうすればよいですか? 2つの方法を教えます Mar 13, 2024 pm 06:01 PM

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

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

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

VirtualBox 固定ディスクをダイナミック ディスクに、またはその逆に変換します VirtualBox 固定ディスクをダイナミック ディスクに、またはその逆に変換します Mar 25, 2024 am 09:36 AM

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

Win11で管理者権限を取得する方法まとめ Win11で管理者権限を取得する方法まとめ Mar 09, 2024 am 08:45 AM

Win11で管理者権限を取得する方法まとめ

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

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

Oracleバージョンの問い合わせ方法の詳細説明 Oracleバージョンの問い合わせ方法の詳細説明 Mar 07, 2024 pm 09:21 PM

Oracleバージョンの問い合わせ方法の詳細説明

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

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

See all articles