مبدأ:
1. JS ينشئ ديناميكيًا DIV ، تحديد فئة الفصل لوضع أنماط صور خلفية مختلفة لعرض تأثيرات مختلفة من ندفة الثلج.
2. JS يحصل على Div الذي تم إنشاؤه ويغير قيمة السمة العليا. عندما يكون الارتفاع المتساقط أكبر من ارتفاع الشاشة ، سيتم حذف Div للجوال.
3. لا ترش إذا كان يبدو غير مكتمل
رمز HTML:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> flyling flying </title> <link rel = "stylesheet" href = "css/index.css"> <script src = "js/move </viv> </body> </html>
رمز CSS
*{الهامش: 0 ؛ الحشو: 0 ؛ على غرار القائمة: لا شيء ؛ الحدود: لا شيء ؛} الجسم {العرض: 100 ٪ ؛ الارتفاع: 600 بكسل ؛ الخلفية:#000 ؛}. SNOW_PARENT {الموضع: النسبي ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ الفائض: مخفي. الهامش: 0 Auto ؛}. Snow_Parent div.parent {background-dimage: url (../ img/snow.png) ؛ تعويم: اليسار. -webkit-transform: Scale (.1) ؛ -moz-transform: Scale (.1) ؛ -O التحول: مقياس (.1) ؛ -Ms-transform: Scale (.1) ؛ التحويل: مقياس (.1) ؛ الموضع: absomute ؛}. Snow_One {width: 180px ؛ الارتفاع: 180 بكسل ؛ خلفية الموضع: 0 0 ؛ تكرار الخلفية: عدم التكرار ؛ اليسار: -70 بكسل ؛ TOP: -95px ؛}. Snow_two {Width: 140px ؛ الارتفاع: 140 بكسل ؛ خلفية الوضع: -220px -18px ؛ اليسار: -30 بكسل ؛ TOP: -75px ؛}. Snow_three {Width: 150px ؛ الارتفاع: 150 بكسل ؛ خلفية الوضع: -400px -15px ؛ اليسار: -20px ؛ TOP: -80px ؛}. Snow_four {Width: 160px ؛ الارتفاع: 160 بكسل ؛ خلفية الوضع: -10px -206px ؛ } .snow_four {left: -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" ، "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 (eleparent) ؛ // يجب طرح اليسار في CSS رقم سالب هنا var maxwidth = parseint (style.width) +70 ؛ // دع يسار Div الذي تم إنشاؤه يكون قيمة عشوائية var randomleft = math.floor (math.random ()*maxwidth) ؛ إرجاع randomleft ؛} // دعها envown () {// الحصول على الكائن المتحرك var movelem = creatdiv () ؛ // احصل على كل قيم سمة النمط للكائن المتحرك var elystyle = window.getComputedStyle (Movelem) ؛ // احصل على كل قيم سمة النمط للكائن المتحرك var elystyle = window.getComputedStyle (Movelem) ؛ // احصل على قيمة السمة العليا var eletop = parseint (elystyle.top) ؛ // قم بتعيين الموقت لتغيير قيمة السمة العليا بشكل ديناميكي للكائن المتحرك var t = setInterval (function () {eletop ++ ؛ // ادفع القيمة العلوية الجديدة إلى الكائن المتحرك movelem.style.top = eletop+"px" ؛ // عندما يسقط إلى ذروة الشاشة ، ووقف الموقت وحذف الكائن المتحرك من العنصر الأصل إذا ( ClearInterval (t) ؛ // لا تحتوي سرعة الإسقاط على 10 مللي ثانية للسقوط 1px} init () {// الحصول على ديناميكي وضبط ارتفاع body. // قم بإنشاء كائن متحرك كل 500 مللي ثانية وتنفيذ وظيفة الحركة var t = setInterval (function () {extrown () ؛} ، 100) ؛}المقالة أعلاه JavaScript تحقق تأثير الثلج [رمز المثال] هو كل المحتوى الذي أشاركه معك. آمل أن يعطيك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.