บทความนี้แบ่งปันรหัสการใช้งานเฉพาะของ JavaScript Emitation Flash Mask Animation สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> ภาพเคลื่อนไหวมาสก์แฟลช </title> <meta name = "คำหลัก" content = ""> <meta name = "คำอธิบาย" เนื้อหา = "> media = "หน้าจอ"> body {margin: 0;}#แบนเนอร์ {ตำแหน่ง: ญาติ; ความกว้าง: 858px; ความสูง: 238px; ล้น: ซ่อน;} </style> </head> <body> <div id = "Banner"> <a href = "javascript: void (0) type = "text/javascript"> ฟังก์ชั่น setMaskinganimation (คอนเทนเนอร์, ความกว้าง, ความสูง, เวลา, พิกเซล, สี) {var __left = mtrand (parseint (ความกว้าง*0.25), parseint (ความกว้าง*0.75)); var __top = mTrand (parseInt (ความสูง*0.25), parseInt (ความสูง*0.75)); if (width> = ความสูง) {var widthspeed = parseInt ((ความกว้าง/ความสูง)*10); var heightspeed = 10; var __width = widthspeed; var __height = ความสูง; } else {var widthspeed = 10; var heightspeed = parseInt ((ความสูง/ความกว้าง)*10); var __width = widthspeed; var __height = ความสูง; } var hander; // ฟังก์ชัน getPosition (_width, _height, _left, _top) {var div1 = {"width": _ ซ้าย, "ความสูง": _ top, "ซ้าย": 0, "top": 0}; var div2 = {"width": _ width, "ความสูง": _ top, "ซ้าย": _ ซ้าย, "top": 0}; var div3 = {"width": width-_left-_width, "ความสูง": _ ด้านบน, "ซ้าย": _ ซ้าย+_width, "top": 0}; var div4 = {"width": _ ซ้าย, "ความสูง": _ ความสูง, "top": _ top}; var div5 = {"width": _ width, "ความสูง": _ ความสูง, "ซ้าย": _ top}; var div6 = {"width": width-_left-_width, "ความสูง": _ ความสูง, "ซ้าย": _ ซ้าย+_width, "top": _ top}; var div7 = {"width": _ ซ้าย, "ความสูง": ความสูง-_top-_height, "ซ้าย": 0, "top": _ top+_height}; var div8 = {"width": _ width, "ความสูง": ความสูง-_top-_Height, "ซ้าย": _ ซ้าย, "ด้านบน": _ top+_height}; var div9 = {"width": width-_left-_width, "ความสูง": ความสูง-_top-_height, "ซ้าย": _ ซ้าย+_width, "top": _ top+_height}; return {"div1": div1, "div2": div2, "div3": div3, "div4": div4, "div5": div5, "div6": div6, "div7": div7, "div8": div8, "div9": div9,}; } // ฟังก์ชั่น mtrand (n1, n2) {return parseint (math.random ()*(n2-n1+1)+n1); } // ฟังก์ชั่น setDiv (I, ตำแหน่ง) {var มี = $ (คอนเทนเนอร์) .find ("div.mask"+i); if (has.length) {have.css ("ซ้าย", position.left); มี. css ("top", position.top); มี. css ("ความกว้าง", position.width); มี. css ("ความสูง", position.height); } else {var html = '<div style = "ตำแหน่ง: Absolute; ซ้าย: {@left} px; top: {@top} px; width: {@width} px; ความสูง: {@height} px; html = html.replace ('{@i}', i); html = html.replace ('{@ซ้าย}', position.left); html = html.replace ('{@top}', position.top); html = html.replace ('{@width}', position.width); html = html.replace ('{@height}', position.height); if (i == 5) {html = html.replace ('{@backgroundColor}', "โปร่งใส"); } else {html = html.replace ('{@backgroundColor}', สี); } $ (คอนเทนเนอร์) .append (HTML); }} // ฟังก์ชั่น play () {__width+= พิกเซล*widthspeed; __Height+= พิกเซล*ความสูง; __left- = พิกเซล*WidthSpeed/2; __top- = พิกเซล*ความสูง/2; ตำแหน่ง var = getPosition (ความกว้าง __, ความสูง __, __ ซ้าย, __ top); สำหรับ (var i = 1; i <= 9; i ++) {setDiv (i, ตำแหน่ง ["div"+i]); } if (position.div1.width <= 0 && positive.div1.height <= 0 && position.div9.width <= 0 && position.div9.height <= 0) {window.clearinterval (hander); $ (คอนเทนเนอร์) .find ("div.mask") ลบ (); }} // hander = window.setInterval (play, time);} $ (function () {setMaskinganimation ("#banner", 858,238,100,2, "#ff0000"); // การตั้งค่าพารามิเตอร์ที่ 4 และพารามิเตอร์ที่ 5ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้และฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript