بعد قراءة أمثلة الصورة التي تطفو في صفحة JavaScript Web Page أمثلة على أمثلة التأثير الخاص ، أعتقد أن الأمر يستحق التعلم.
قم بتغيير الصورة إلى صورة ندفة الثلج لإكمال تأثير انخفاض ندفة الثلج.
علاوة على ذلك ، فإن بعض المحتويات عفا عليها الزمن نسبيا ، لذلك دعونا نغيرها من قبل العلماء.
يشمل:
1. العمليات على اليسار والأعلى تدعم متصفح IE فقط. هذا جيد. يجب أن تدعم الكروم.
2. للتحكم في مكان الصورة ، تحتاج أيضًا إلى البحث عن عنصر. إذا لم يكن الأمر كذلك ، فقم بتغييره إلى صيانة الصفيف وتشغيل الكائنات التي يتم الاحتفاظ بها مباشرة في الصفيف ، والتي لن تكون أسرع.
3. إضافة عناصر إلى المستند يتغير مباشرة إلى إنشاء كائنات العناصر من خلال رمز JS.
أفكار التنفيذ:
1. تهيئة وتوليد 10 divs ، وكلها في وضع تماما. ضع صورة ندفة الثلج في كل DIV ، وضبط العرض والارتفاع ، وحفظها في صفيف ، بحيث يمكن أن تعمل الثلوج لاحقًا مباشرة.
2. تهيئة الإحداثيات الأفقية والرأسية لكل درج ، واترك دائمًا وضعية ندفة الثلج للسقوط.
3. قم بتهيئة كل ندفة الثلج بخطوة إسقاط رأسية وخطوة تأرجح أفقية ، بحيث تسقط كل ندفة ثلجية وتتأرجح بسرعة مختلفة.
4. قم بعمل وظيفة ثلج ، اضبط الوظيفة كل 10 ثوانٍ. في كل مرة ، يتحكم في الوظيفة للتحكم في طول كل ندفة الثلج العمودية. يتم حساب التأرجح الأفقي عن طريق وظيفة الجيب ويضربه السعة. وبهذه الطريقة ، تقع رقاقات الثلج حسب شكل الموجة الجيبية.
يمكنك العثور على أي صور عبر الإنترنت.
الكود التالي متوافق مع IE8+ والكروم.
نسخة الكود كما يلي:
<body>
<script language = "javaScript">
// في عملية الصورة ، فإن مسار الإحداثي الأفقي هو منحنى جيب متمركز على نقطة.
// يتم الانتهاء من وظيفة الرسوم المتحركة باستخدام وظيفة setTimeout
//صورة
var snowsrc = "Snowflake.png"
// عدد رقاقات الثلج
var no = 10 ؛
// DECLARE ، تمثل XP إحداثيات أفقية ، ويمثل YP إحداثيات رأسية>
var dx ، xp ، yp ؛
// DECLARE ، تمثل AM سعة التقلبات اليمنى واليسرى ، ويمثل STX خطوة الإزاحة للإحداثيات الأفقية ، ويمثل Sty خطوة الإحداثيات الرأسية>
var am ، stx ، sty ؛
{
// احصل على عرض النافذة الحالية
clientwidth = document.body.clientwidth ؛
// احصل على ارتفاع النافذة الحالية
clientHeight = document.body.clientheight ؛
}
var dx = new array () ؛
var xp = new array () ؛
var yp = new array () ؛
var am = new array () ؛
var stx = new array () ؛
var sty = new array () ؛
var snowflakes = new array () ؛
لـ (i = 0 ؛ i <no ؛ ++ i) {
dx [i] = 0 ؛
// القيمة الأولية للإحداثي الأفقي للصورة I-Th
XP [i] = Math.Random ()*(ClientWidth-50) ؛
yp [i] = math.random ()*clientHeight ؛ // القيمة الأصلية للإحداثيات العمودية للصورة I-th
am [i] = math.random ()*20 ؛ // سعة التقلبات اليمنى واليمنى للصورة I-th
STX [i] = 0.02 + math.random ()/10 ؛ // طول خطوة الاتجاه x للصورة i-th
sty [i] = 0.7 + math.random () ؛ // طول خطوة I-Th Picture y Direction
// قم بإنشاء div يحمل صورة ندفة الثلج ووضع إحداثياتها المطلقة
var snownovediv = document.createElement ('div') ؛
Snownovediv.setAttribute ('id' ، 'dot'+ i) ؛
snownovediv.style.position = 'aboort' ؛
snownovediv.style.top = 15 ؛
snownovediv.style.left = 15 ؛
// قم بإنشاء كائن صورة ثلج ، وضبط العرض والارتفاع ، وأضف Div
var snowflakeimg = document.createElement ('img') ؛
Snowflakeimg.setAttribute ('SRC' ، SnowsRC) ؛
Snowflakeimg.style.width = 30 ؛
Snowflakeimg.style.Height = 30 ؛
// أضف Div Snowflake إلى المستند وحفظه من خلال الصفيف
Snownowdakeiv.AppendChild (Snowflakeimg) ؛
document.body.appendChild (Snowflakediv) ؛
رقاقات الثلج [i] = Snowflakediv ؛
}
وظيفة الثلج () {
لـ (i = 0 ؛ i <no ؛ ++ i) {
// الإحداثي العمودي بالإضافة إلى طول الخطوة للصورة I-Th
yp [i] += sty [i] ؛
// إذا تجاوز الإحداثي الجديد الحافة السفلية للشاشة ، فأعد ضبط معلومات الصورة ، بما في ذلك الإحداثي الأفقي ، والإحداثيات الرأسية ، وحجم الخطوة في الاتجاه x وحجم الخطوة في الاتجاه y
if (yp [i]> clientheight-50) {
// أعيد تعيين الإحداثيات الأفقية للصورة
XP [i] = Math.Random ()*(ClientWidth-AM [i] -30) ؛
// أعد تعيين الإحداثيات الرأسية للصورة
yp [i] = 0 ؛
}
dx [i] += stx [i] ؛ // أضف خطوة واحدة
// معالجة مباشرة Div Snowflake Div المقابلة في الصفيف
var snownovediv = Snowflakes [i] ؛
// تحديث الإحداثيات الرأسية للصورة
snownovediv.style.top = yp [i] ؛
// قم بتحديث المحور الأفقي للصورة
snownovediv.style.left = xp [i] + am [i]*math.sin (dx [i]) ؛
}
// اضبط الفترة الزمنية لتحديث الرسوم المتحركة
setTimeout ("Snow ()" ، 10) ؛
}
// استدعاء وظيفة Snowie ()
الثلج () ؛
</script>
</body>
ما سبق هو كل الكود ، والتأثير جيد جدا. للحصول على شرح محدد ، يرجى الرجوع إلى التعليقات. لن أتحدث كثيرًا هنا. آمل أن يكون ذلك مفيدًا للجميع.