JavaScript Webページの特殊効果の例に浮かんでいる画像の例を読んだ後、学ぶ価値があると思います。
写真をスノーフレークの写真に変更して、雪片が落ちる効果を完成させます。
さらに、一部の内容は比較的時代遅れなので、学者によって変更しましょう。
含む：
1.左および上部の唯一のサポートIEブラウザの操作。これは大丈夫です。 Chromeをサポートする必要があります。
2。画像の所在を制御するには、要素を検索する必要もあります。そうでない場合は、それを配列のメンテナンスに変更し、配列で維持されているオブジェクトを直接操作しますが、これはより速くなりません。
3.ドキュメントに要素を追加すると、JSコードを介して要素オブジェクトの作成が直接変更されます。
実装のアイデア：
1。10個のDIVを初期化して生成します。これらはすべて絶対に配置されています。各divにスノーフレークの写真を置き、幅と高さを設定し、アレイに保存して、雪が後で直接動作できるようにします。
2。各divの水平座標と垂直座標を初期化し、常にスノーフレークに秋の開始位置を与えます。
3.各スノーフレークを垂直ドロップステップと水平スイングステップで初期化し、各スノーフレークが落ちて異なる速度でスイングするようにします。
4.雪の関数を作成し、10秒ごとに関数を調整します。毎回、それは関数を制御して、各スノーフレークの長さを垂直に制御します。水平スイングは正弦関数によって計算され、振幅を掛けます。このようにして、雪片は正弦波に応じて落ちます。
オンラインで写真を見つけることができます。
次のコードは、IE8+およびChromeと互換性があります。
コードコピーは次のとおりです。
<body>
<スクリプト言語= "javascript">
//画像のプロセスでは、水平座標の軌跡はポイントを中心とする正弦波曲線です。
// settimeout関数を使用してアニメーション関数は完了します
//写真
var snowsrc = "snowflake.png"
//雪片の数
var no = 10;
//変数を宣言し、XPは水平座標を表し、YPは垂直座標を表します>
var dx、xp、yp;
//変数を宣言し、amは左と右のスイングの振幅を表し、stxは水平座標のオフセットステップを表し、スタイルは垂直座標のステップを表します>
var am、stx、sty;
{
//現在のウィンドウの幅を取得します
clientWidth = document.body.clientWidth;
//現在のウィンドウの高さを取得します
clientheight = document.body.clientheight;
}
var dx = new Array（）;
var xp = new Array（）;
var yp = new Array（）;
var am = new Array（）;
var stx = new Array（）;
var sty = new Array（）;
var Snowflakes = new Array（）;
for（i = 0; i <no; ++ i）{
dx [i] = 0;
// i番目の画像の水平座標の初期値
xp [i] = math.random（）*（clientWidth-50）;
yp [i] = math.random（）*clientheight; // i番目の画像の垂直座標の元の値
am [i] = math.random（）*20; // i番目の画像の左右の揺れの振幅
stx [i] = 0.02 + math.random（）/10; // i番目の画像のx方向のステップ長
sty [i] = 0.7 + math.random（）; // i番目の画像y方向のステップ長
//スノーフレークの画像を保持し、その絶対座標を設定するDivを生成します
var snowflakediv = document.createelement（ 'div'）;
Snowflakediv.setattribute（ 'id'、 'dot'+ i）;
snowflakediv.style.position = 'absolute';
snowflakediv.style.top = 15;
snowflakediv.style.left = 15;
//スノーフレーク画像オブジェクトを生成し、幅と高さを設定し、Divを追加します
var snowflakeimg = document.createelement（ 'img'）;
snowflakeimg.setattribute（ 'src'、snowsrc）;
snowflakeimg.style.width = 30;
snowflakeimg.style.height = 30;
//スノーフレークdivをドキュメントに追加し、配列から保存します
Snowflakediv.AppendChild（Snowflakeimg）;
document.body.appendChild（Snowflakediv）;
スノーフレーク[i] = snowflakediv;
}
function Snow（）{
for（i = 0; i <no; ++ i）{
// i番目の画像の垂直座標とステップ長さ
yp [i] += sty [i];
//新しい座標が画面の下端を超えた場合、X方向の水平座標、垂直座標、およびY方向のステップサイズを含む画像の情報をリセットします
if（yp [i]> clientheight-50）{
//画像の水平座標を再割り当てします
xp [i] = math.random（）*（clientWidth-am [i] -30）;
//画像の垂直座標を再割り当てします
yp [i] = 0;
}
dx [i] += stx [i]; // 1つのステップを追加します
//配列内の対応するスノーフレークdivを直接操作します
var snowflakediv = snowflakes [i];
//画像の垂直座標を更新します
snowflakediv.style.top = yp [i];
//画像の水平軸を更新します
snowflakediv.style.left = xp [i] + am [i]*math.sin（dx [i]）;
}
//アニメーション更新の期間を設定します
setimeout（ "Snow（）"、10）;
}
// Snowie（）関数を呼び出します
雪（）;
</script>
</body>
上記はすべてのコードであり、その効果は非常に良いです。特定の説明については、コメントを参照してください。ここではあまりナンセンスについては話しません。私はそれが誰にでも役立つことを願っています。