تصف هذه المقالة التأثير العائم للصورة البسيطة التي تنفذها JS. شاركه للرجوع إليه ، على النحو التالي:
استخدام كائنات النوافذ لتحقيق تأثير عائم للصورة
1. هناك Div إعلانات نريد التحكم فيه ، نقطة البداية (0،0)
2. اضبط السرعات الأفقية والعمودية
3. التحكم في الإعلان Div Mobile
1) ما إذا كان إعلان DIV يصل إلى الحدود
2) إذا وصلنا إلى الحدود ، فقد حددنا السرعة للتحرك في الاتجاه المعاكس
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> undled document </title> div {position: مرشح: ألفا (عتامة = 100) ؛/* ie*/-moz opitory: 1 ؛/* moz + ff*/opated: 1 ؛/* متصفحات تدعم CSS3 (FF 1.5 أيضًا) type = "text/javaScript"> // احصل على كائن div حيث تكون الصورة var img = document.getElementById ("divimg") ؛ // قم بتعيين إحداثيات الزاوية اليسرى العليا من DIV ، إحداثيات نقطة البداية var x = 10 ، y = 10 ؛ // اضبط سرعة السفر للصورة var xspeed = 2 ، yspeed = 1 ؛ // قم بتعيين الحد الأقصى للارتفاع العائم وعرض الصورة var w = document.documentElement.ClientWidth-110 ، H = document.documentElement.Clientheight-160 ؛ الدالة floatimg () {// قارن ما إذا كان قرص الصورة يصل إلى الحدود // إذا وصلنا إلى الحدود ، فإننا نتحكم في الصورة لتغيير الاتجاه إذا (x> w || x <0) {xspeed = -xspeed ؛ } if (y> h || y <0) {yspeed = -yspeed ؛ } // إذا لم يتم الوصول إلى الحدود ، فقم بتعيين إحداثيات الزاوية اليسرى العليا من الصورة // قم بتعيين إحداثيات قيمة الإحداثيات + السرعة x + = xspeed ؛ y+= yspeed ؛ img.style.top = y+"px" ؛ img.style.left = x+"px" ؛ // تأخير استدعاء الوظيفة floatimg () ، و call setTimeOut ("floatimg ()") ، 40) ؛ } floatimg () ؛ </script> </body> </html>لمزيد من المعلومات حول المحتوى المتعلق بـ javaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لتأثيرات وتقنيات تبديل JavaScript" ، "ملخص لمهارات خوارزمية بحث JavaScript" ، "ملخص لتأثيرات الرسوم المتحركة JavaScript و Techniques و" ملخص ". خوارزميات وتقنيات JavaScript Traversal "، و" ملخص استخدام العمليات الرياضية JavaScript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.