この記事の例は、参照のためにJavaScriptのスノーフレーク飛行効果の実装を共有しています。特定のコンテンツは次のとおりです
原理：
1。JSはDivを動的に作成し、クラスクラスを指定して、異なるスノーフレーク効果を表示するさまざまな背景画像スタイルを設定します。
2。JSは作成されたDIVを取得し、そのトップ属性値を変更します。高さが画面の高さよりも大きい場合、モバイルDIVは削除されます。
3.不完全であると思われる場合はスプレーしないでください
効果プレビュー：http：//wjf444128852.github.io/demo02/snow/index.html
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プログラミングを学ぶことが役立つことを願っています。