この記事の例は、参照のために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プログラミングを学ぶことが役立つことを願っています。