หลังจากอ่านตัวอย่างของภาพที่ลอยอยู่ในหน้าเว็บ JavaScript ตัวอย่างเอฟเฟกต์พิเศษฉันคิดว่ามันคุ้มค่าที่จะเรียนรู้
เปลี่ยนภาพเป็นภาพเกล็ดหิมะเพื่อให้เอฟเฟกต์ของเกล็ดหิมะตกลงมา
ยิ่งกว่านั้นเนื้อหาบางส่วนค่อนข้างล้าสมัยดังนั้นให้เปลี่ยนพวกเขาเป็นนักวิชาการ
รวม:
1. การดำเนินการด้านซ้ายและด้านบนรองรับเท่านั้นคือเบราว์เซอร์เช่นเบราว์เซอร์ นี่ก็โอเค มันจะต้องสนับสนุนโครเมี่ยม
2. ในการควบคุมที่อยู่ของภาพคุณต้องค้นหาองค์ประกอบ ถ้าไม่เช่นนั้นเปลี่ยนเป็นการบำรุงรักษาอาร์เรย์และใช้งานวัตถุที่เก็บรักษาไว้ในอาร์เรย์โดยตรงซึ่งจะไม่เร็วขึ้น
3. การเพิ่มองค์ประกอบลงในเอกสารจะเปลี่ยนไปโดยตรงเพื่อสร้างวัตถุองค์ประกอบผ่านรหัส JS
แนวคิดการใช้งาน:
1. เริ่มต้นและสร้าง 10 divs ซึ่งทั้งหมดอยู่ในตำแหน่งที่แน่นอน ใส่ภาพเกล็ดหิมะในแต่ละ div ตั้งค่าความกว้างและความสูงและบันทึกไว้ในอาร์เรย์เพื่อให้ฟังก์ชั่นที่หิมะสามารถทำงานได้โดยตรง
2. เริ่มต้นพิกัดแนวนอนและแนวตั้งของแต่ละ div และให้สโนว์เฟลคเป็นตำแหน่งเริ่มต้นสำหรับการล่มสลาย
3. เริ่มต้นเกล็ดหิมะแต่ละอันด้วยขั้นตอนการตกแนวตั้งและขั้นตอนการแกว่งแนวนอนเพื่อให้เกล็ดหิมะแต่ละตัวตกลงมาและแกว่งด้วยความเร็วที่แตกต่างกัน
4. ทำฟังก์ชั่นหิมะปรับฟังก์ชั่นทุก ๆ 10 วินาที ในแต่ละครั้งจะควบคุมฟังก์ชั่นเพื่อควบคุมความยาวของเกล็ดหิมะแต่ละครั้งที่ตกลงมาในแนวตั้งและคำนวณค่าไซน์ผ่านฟังก์ชั่นไซน์และคูณด้วยแอมพลิจูด ด้วยวิธีนี้เกล็ดหิมะตกอยู่ในรูปแบบของรูปคลื่นไซน์
คุณสามารถค้นหารูปภาพออนไลน์ได้
รหัสต่อไปนี้เข้ากันได้กับ IE8+ และ Chrome
การคัดลอกรหัสมีดังนี้:
<body>
<ภาษาสคริปต์ = "JavaScript">
// ในกระบวนการของภาพวิถีของพิกัดแนวนอนคือเส้นโค้งไซน์ที่มีศูนย์กลางอยู่ที่จุดหนึ่ง
// ฟังก์ชั่นภาพเคลื่อนไหวเสร็จสมบูรณ์โดยใช้ฟังก์ชั่น settimeout
//รูปภาพ
var snowsrc = "snowflake.png"
// จำนวนเกล็ดหิมะ
var no = 10;
// ประกาศตัวแปร XP แสดงถึงพิกัดแนวนอน YP แสดงถึงพิกัดแนวตั้ง>
var dx, xp, yp;
// ประกาศตัวแปร 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
// สร้าง div ที่เก็บภาพเกล็ดหิมะและตั้งค่าพิกัดสัมบูรณ์
var snowflakediv = document.createElement ('div');
Snowflakediv.setAttribute ('id', 'dot'+ i);
Snowflakediv.style.position = 'Absolute';
Snowflakediv.style.top = 15;
Snowflakediv.style.left = 15;
// สร้างวัตถุภาพเกล็ดหิมะตั้งค่าความกว้างและความสูงและเพิ่ม div
var snowflakeimg = document.createelement ('img');
Snowflakeimg.setAttribute ('SRC', SNOWSRC);
Snowflakeimg.style.width = 30;
Snowflakeimg.style.height = 30;
// เพิ่ม Div Snowflake ลงในเอกสารและบันทึกผ่านอาร์เรย์
Snowflakediv.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]; // เพิ่มหนึ่งขั้นตอน
// จัดการโดยตรงกับเกล็ดหิมะที่เกี่ยวข้องในอาร์เรย์
var snowflakediv = เกล็ดหิมะ [i];
// อัปเดตพิกัดแนวตั้งของรูปภาพ
Snowflakediv.style.top = yp [i];
// อัปเดตแกนแนวนอนของรูปภาพ
Snowflakediv.style.left = xp [i] + am [i]*math.sin (dx [i]);
-
// ตั้งค่าช่วงเวลาสำหรับการรีเฟรชภาพเคลื่อนไหว
Settimeout ("Snow ()", 10);
-
// เรียกฟังก์ชั่น Snowie ()
หิมะ();
</script>
</body>
ข้างต้นคือรหัสทั้งหมดและเอฟเฟกต์ค่อนข้างดี สำหรับคำอธิบายเฉพาะโปรดดูความคิดเห็น ฉันจะไม่พูดเรื่องไร้สาระมากที่นี่ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน