原理：
1。JSはDivを動的に作成し、クラスクラスを指定して、異なるスノーフレーク効果を表示するさまざまな背景画像スタイルを設定します。
2。JSは作成されたDIVを取得し、そのトップ属性値を変更します。高さが画面の高さよりも大きい場合、モバイルDIVは削除されます。
3.不完全であると思われる場合はスプレーしないでください
HTMLコード：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> snowflakes flying </title> <link rel = "styleSheet" href = "css/index.css"> <スクリプトSrc = "js/move.js </div> </body> </html>
CSSコード
*{マージン：0;パディング：0;リストスタイル：なし;ボーダー：なし;} body {width：100％;高さ：600px;背景：＃000;}。snow_parent {position：relative;幅：100％;高さ：100％;オーバーフロー：隠し;マージン：0 auto;}。snow_parent div.parent {background-image：url（../ img/snow.png）;フロート：左; -webkit-transform：scale（.1）; -moz-transform：scale（.1）; -o-transform：scale（.1）; -ms-transform：scale（.1）;変換：スケール（.1）;位置：絶対;}。snow_one {width：180px;高さ：180px;バックグラウンドポジション：0 0;バックグラウンドリピート：ノーリピート。左：-70px;上：-95px;}。snow_two {width：140px;高さ：140px;バックグラウンドポジション：-220px -18px;左：-30px;上：-75px;}。snow_three {width：150px;高さ：150px;バックグラウンドポジション：-400px -15px;左：-20px;上：-80px;}。snow_four {width：160px;高さ：160px;バックグラウンドポジション：-10px -206px; } .snow_four {左：-10px;トップ：-85px;}JSコード：
/* creatby jiucheng 2016-4-24*/ window.onload = function（）{init（）;} // divfunction creatdiv（）{// divを作成して、親要素var snowdiv = document.reateelement（ "div"）; document.getElementById（ "js_sonw"）。appendchild（snowdiv）; // divをランダムに作成し、異なるスノーフレークを表示するクラスを作成しますvar whatname = ["snow_one parent"、 "snow_two parent"、 "snow_three parent"、 "snow_four parent"]; var index = math.floor（math.random（）*whatname.length）; snowdiv.classname = whatname [index]; // div（ランダム）の左属性値を取得し、作成したdiv var whatleft = getLeft（）+'px'に割り当てます。 snowdiv.style.left = whatleft; Return Snowdiv;} //ランダム左属性値関数getLeft（）{// divの最大左属性値を取得します。つまり、親要素の幅var eleparent = document.getElementbyid（ "js_sonw"）; //親要素のすべてのスタイルを取得var var style = window.getComputedStyle（leeparent）; // CSSの左は、ここでvar maxwidth = parseint（style.width）+70で減算する必要があります。 //作成されたdivの左をランダム値としますvar randomleft = math.floor（math.random（）*maxwidth）; RETURN RANDAMINLEFT;} // let it MoveOwn（）{//移動オブジェクトvar moveElem = creatdiv（）;を取得します; //移動オブジェクトのすべてのスタイル属性値を取得var Elestele = window.getComputedStyle（MoveElem）; //移動オブジェクトのすべてのスタイル属性値を取得var Elestyle = window.getComputedStyle（MoveElem）; //そのトップ属性値を取得var eletop = parseint（elestele.top）; //移動オブジェクトの上位属性値を動的に変更するようにタイマーを設定するvar t = setInterval（function（）{eletop ++; //移動オブジェクトMoveElem.top = eletop+"px"; //画面の高さに落ちると、画面の高さを停止し、[eletop> = deletop.in = delete object） ClearInterval（t）; //ドロップ速度には10ミリ秒の1px} function init（）{//動的にボディの高さを取得して設定します。body.style.height= window.innerheight+"px"; // 500ミリ秒ごとに移動オブジェクトを作成し、動きfunction var t = setinterval（function（）{moveown（）;}、100）;}を実行します上記の記事JavaScriptは、雪の効果を達成します[コードの例]は、私があなたと共有するすべてのコンテンツです。私はそれがあなたに参照を与えることができることを願っています、そしてあなたがwulin.comをもっとサポートできることを願っています。