javascriptを使って雪の降る効果を実現します.
4227 ワード
javascriptウェブサイトの特効の実例大全書の中のピクチャーの翻る効果の実例を見て、着手して学ぶことに値すると感じます.
写真を雪の絵に変えて、雪が降る効果を完成します.
また、中には古い内容がありますので、学者に直してください.
含む:
1.leftとtopの操作はIEブラウザだけをサポートします.これはどうすればいいですか?chromeをサポートしなければなりません.2.写真の落下を制御する過程はまたelementを検索しなければなりません.よくないでしょう.配列維持に変えて、直接的に配列の中で維持される対象を操作しても、速くならないです.3.ドキュメントに要素を追加し、直接にJSコードで要素オブジェクトを作成する方式に変更します.
実現の考え方:
1.初期化して10個のdivを生成し、すべて絶対位置付けを採用し、各divに雪の絵を一つずつ置いて、幅の高さを設定し、配列の中に保存して、後で雪が降る関数を直接操作しやすいです.2.各divの横座標と縦座標を初期化し、常に雪の花に落下の開始位置を与えるようにしましょう.3.初期化したのは各雪の縦方向の落下歩幅を設定し、横方向の揺れの歩幅を設定しています.このように、それぞれの雪は速度を変えて落下し、揺れます.4.降雪の関数として、10秒ごとにこの関数を調整します.この関数は、各雪片が縦方向に自分の歩幅を保つようにコントロールします.横方向のスイングは正弦関数を通じて正弦値を算出してから幅を乗じます.このように雪花の落下は正弦波形の方式で行います.
写真はネットで自由に探すことができます.
以下のコードはIE 8+,Chromeに対応しています.
写真を雪の絵に変えて、雪が降る効果を完成します.
また、中には古い内容がありますので、学者に直してください.
含む:
1.leftとtopの操作はIEブラウザだけをサポートします.これはどうすればいいですか?chromeをサポートしなければなりません.2.写真の落下を制御する過程はまたelementを検索しなければなりません.よくないでしょう.配列維持に変えて、直接的に配列の中で維持される対象を操作しても、速くならないです.3.ドキュメントに要素を追加し、直接にJSコードで要素オブジェクトを作成する方式に変更します.
実現の考え方:
1.初期化して10個のdivを生成し、すべて絶対位置付けを採用し、各divに雪の絵を一つずつ置いて、幅の高さを設定し、配列の中に保存して、後で雪が降る関数を直接操作しやすいです.2.各divの横座標と縦座標を初期化し、常に雪の花に落下の開始位置を与えるようにしましょう.3.初期化したのは各雪の縦方向の落下歩幅を設定し、横方向の揺れの歩幅を設定しています.このように、それぞれの雪は速度を変えて落下し、揺れます.4.降雪の関数として、10秒ごとにこの関数を調整します.この関数は、各雪片が縦方向に自分の歩幅を保つようにコントロールします.横方向のスイングは正弦関数を通じて正弦値を算出してから幅を乗じます.このように雪花の落下は正弦波形の方式で行います.
写真はネットで自由に探すことができます.
以下のコードはIE 8+,Chromeに対応しています.
<br> // ，
<br> // setTimeout
<br> //
<br> var snowsrc=" .png"
<br> //
<br> var no = 10;
<br> // ，xp ，yp >
<br> var dx, xp, yp;
<br> // ，am ，stx ，sty >
<br> var am, stx, sty;
<br> {
<br> //
<br> clientWidth = document.body.clientWidth;
<br> //
<br> clientHeight = document.body.clientHeight;
<br> }
<br> var dx = new Array();
<br> var xp = new Array();
<br> var yp = new Array();
<br> var am = new Array();
<br> var stx = new Array();
<br> var sty = new Array();
<br> var snowFlakes = new Array();
<br> for (i = 0; i < no; ++ i) {
<br> dx[i] = 0;
<br> // i
<br> xp[i] = Math.random()*(clientWidth-50);
<br> yp[i] = Math.random()*clientHeight;// i
<br> am[i] = Math.random()*20; // i
<br> stx[i] = 0.02 + Math.random()/10; // i x
<br> sty[i] = 0.7 + Math.random(); // i y
<br> // div，
<br> var snowFlakeDiv = document.createElement('div');
<br> snowFlakeDiv.setAttribute('id', 'dot'+ i);
<br> snowFlakeDiv.style.position = 'absolute';
<br> snowFlakeDiv.style.top = 15;
<br> snowFlakeDiv.style.left = 15;
<br> // ， ， div
<br> var snowFlakeImg = document.createElement('img');
<br> snowFlakeImg.setAttribute('src', snowsrc);
<br> snowFlakeImg.style.width = 30;
<br> snowFlakeImg.style.height = 30;
<br> // div document ，
<br> snowFlakeDiv.appendChild(snowFlakeImg);
<br> document.body.appendChild(snowFlakeDiv);
<br> snowFlakes[i] = snowFlakeDiv;
<br> }
<br> function snow() {
<br> for (i = 0; i < no; ++ i) {
<br> // i
<br> yp[i] += sty[i];
<br> // ， ， 、 x y
<br> if (yp[i] > clientHeight-50) {
<br> //
<br> xp[i] = Math.random()*(clientWidth-am[i]-30);
<br> //
<br> yp[i] = 0;
<br> }
<br> dx[i] += stx[i];//dx
<br> // div
<br> var snowFlakeDiv = snowFlakes[i];
<br> //
<br> snowFlakeDiv.style.top = yp[i];
<br> //
<br> snowFlakeDiv.style.left = xp[i] + am[i]*Math.sin(dx[i]);
<br> }
<br> //
<br> setTimeout("snow()", 10);
<br> }
<br> // snowIE()
<br> snow();
<br>