บทความนี้อธิบายถึงเอฟเฟกต์ภาพลอยตัวแบบง่าย ๆ ที่ใช้โดย JS แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
การใช้วัตถุหน้าต่างเพื่อให้ได้เอฟเฟกต์ลอยตัวของภาพ
1. มีโฆษณาโฆษณาที่เราต้องการควบคุมจุดเริ่มต้น (0,0)
2. ตั้งค่าความเร็วแนวนอนและแนวตั้ง
3. การควบคุมโฆษณา Div Mobile
1) โฆษณา Div มาถึงขอบเขตหรือไม่
2) ถ้าเราไปถึงขอบเขตเราตั้งค่าความเร็วให้เคลื่อนที่ในสิ่งที่ตรงกันข้าม
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "ข้อความ/html; charset = utf-8"/> <title> ตัวกรอง: อัลฟ่า (ความทึบ = 100);/* เช่น*/-moz -proacity: 1;/* moz + ff*/ความทึบ: 1;/* เบราว์เซอร์ที่รองรับ css3 (ff 1.5 รองรับ)*/} </style> </head> <body> <body> 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 () และการโทร setTimeout ("floatimg ()"), 40); } floatimg (); </script> </body> </html>สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเอฟเฟกต์และเทคนิคการสลับ JavaScript", "สรุปทักษะอัลกอริธึมการค้นหา JavaScript", "สรุปผลการสรุปและเทคนิคการสรุปของ JavaScript ของ JavaScript อัลกอริทึมและเทคนิคการสำรวจ JavaScript "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน