ตัวอย่างในบทความนี้แบ่งปันการดำเนินการตามเอฟเฟกต์การบินเกล็ดหิมะของจาวาสคริปต์สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
หลักการ:
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> เกล็ดหิมะบิน </title> <link rel = "stylesheet" href = "css/index.css"> <script src = "js/move.js </div> </body> </html>
รหัส CSS
*{มาร์จิ้น: 0; Padding: 0; รายการสไตล์: ไม่มี; ชายแดน: ไม่มี;} ร่างกาย {ความกว้าง: 100%; ความสูง: 600px; พื้นหลัง:#000;}. SNOW_PARENT {ตำแหน่ง: ญาติ; ความกว้าง: 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.createelement ("div"); document.getElementById ("JS_SONW"). AppendChild (SnowDiv); // สร้างคลาสที่สร้าง div แบบสุ่มและแสดงเกล็ดหิมะที่แตกต่างกัน var whatname = ["snow_one parent", "parent snow_two", "parent snow_three", "snow_four parent"]; var index = math.floor (math.random ()*whatname.length); snowdiv.className = whatname [index]; // รับค่าแอตทริบิวต์ซ้ายของ DIV (สุ่ม) และกำหนดให้กับ Div Div ที่สร้างขึ้น whatleft = getLeft ()+'px'; snowdiv.style.left = Whatleft; ส่งคืน SnowDiv;} // รับฟังก์ชันค่าแอตทริบิวต์ซ้ายแบบสุ่ม getLeft () {// รับค่าแอตทริบิวต์ซ้ายสูงสุดของ DIV นั่นคือความกว้างขององค์ประกอบหลัก var elepearent = document.getElementById ("JS_SONW"); // รับทุกรูปแบบขององค์ประกอบหลัก var var style = window.getComputedStyle (eleparent); // ด้านซ้ายใน CSS เป็นจำนวนลบที่นี่จะต้องลบที่นี่ var maxwidth = parseint (style.width) +70; // ให้ด้านซ้ายของ div ที่สร้างขึ้นเป็นค่าสุ่ม var ubernleft = math.floor (math.random ()*maxwidth); return anwerleft;} // ปล่อยให้มันย้าย () {// รับวัตถุที่เคลื่อนที่ var movelem = creatdiv (); // รับค่าแอตทริบิวต์สไตล์ทั้งหมดของวัตถุที่เคลื่อนไหว var elestyle = window.getComputedStyle (Movelem); // รับค่าแอตทริบิวต์สไตล์ทั้งหมดของวัตถุที่เคลื่อนไหว var elestyle = window.getComputedStyle (Movelem); // รับค่าแอตทริบิวต์สูงสุด var eletop = parseint (elestyle.top); // ตั้งค่าตัวจับเวลาให้เปลี่ยนค่าแอตทริบิวต์ด้านบนแบบไดนามิกของวัตถุที่เคลื่อนที่ var t = setInterval (ฟังก์ชัน () {eletop ++; // จ่ายค่าสูงสุดใหม่ให้กับวัตถุเคลื่อนที่ movelem.style.top = eletop+"px"; // เมื่อมันตกสู่ความสูงของหน้าจอ ClearInterval (t); // ความเร็วในการลดลงไม่มี 10 มิลลิวินาทีในการลดลง 1px} function init () {// ได้รับแบบไดนามิกและตั้งค่าความสูงของ document body.body.style.height = window.innerHeight+"px"; // สร้างวัตถุที่กำลังเคลื่อนที่ทุก ๆ 500 มิลลิวินาทีและดำเนินการฟังก์ชั่นการเคลื่อนไหว var t = setInterval (function () {movedown ();}, 100);}ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript