Dieser Artikel teilt den spezifischen Implementierungscode der JavaScript -Imitations -Flash -Mask -Animation für Ihre Referenz. Der spezifische Inhalt ist wie folgt
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <title> Flash-Mask-Animation </title> <meta name = "keywords" content = ""> <meta name = "Beschreibung" content = ""> <script charset = "utf-8" src = "jquery.js"> </script Media = "Screen"> Body {Margin: 0;}#Banner {Position: relativ; Breite: 858px; Höhe: 238px; Überlauf: versteckt;} </style> </head> <body> <div id = "banner"> <a href = "javascript: void (0);"> <img type = "text/javaScript"> Funktionsetmaskinganimation (Container, Breite, Höhe, Zeit, Pixel, Farbe) {var __left = mtrand (parseInt (width*0,25), ParseInt (Breite*0,75)); var __top = Mtrand (ParseInt (Höhe*0,25), ParseInt (Höhe*0,75)); if (width> = Höhe) {var widthSpeed = parseInt ((width/Höhe)*10); var Highspeed = 10; var __width = widthSpeed; var __Height = Heightspeed; } else {var widthSpeed = 10; var Highspeed = ParseInt ((Höhe/Breite)*10); var __width = widthSpeed; var __Height = Heightspeed; } var Hander; // Funktion getPosition (_width, _height, _left, _top) {var div1 = {"width": _ links, "Höhe": _ oben, "links": 0, "ober": 0}; var div2 = {"width": _ breit, "Höhe": _ oben, "links": _ links, "ober": 0}; var div3 = {"width": width-_left-_width, "Höhe": _ oben, "links": _ links+_width, "top": 0}; var div4 = {"width": _ links, "Höhe": _ Höhe, "ober": _ top}; var div5 = {"width": _ width, "Höhe": _ Höhe, "links": _ top}; var div6 = {"width": width-_left-_width, "Höhe": _ Höhe, "links": _ links+_width, "top": _ top}; var div7 = {"width": _ links, "Höhe": Höhe-_top-_Height, "links": 0, "ober": _ Top+_Height}; var div8 = {"width": _ width, "Höhe": Höhe-_top-_Height, "links": _ links, "ober": _ Top+_Height}; var div9 = {"width": width-_left-_width, "Höhe": Höhe-_top-_Height, "links": _ links+_width, "top": _ top+_Height}; return {"div1": div1, "div2": div2, "div3": div3, "div4": div4, "div5": div5, "div6": div6, "div7": div7, "div8": div8, "div9": div9, div9,}; } // Funktion mTrand (n1, n2) {return parseInt (math.random ()*(n2-n1+1)+n1); } // Funktion setDiv (i, Position) {var has = $ (Container) .find ("div.mask"+i); if (has.Length) {has.css ("links", Position.Left); Has.css ("Top", Position.top); Has.css ("Breite", Position.width); Has.css ("Höhe", Position.Height); } else {var html = '<div style = "Position: Absolute; links: {@links} px; top: {@top} px; width: {@width} px; Höhe: {@height} px; background-color: {@backgroundColor};"> </div>'; html = html.replace ('{@i}', i); html = html.replace ('{@links}', 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}', "transparent"); } else {html = html.replace ('{@backgroundColor}', color); } $ (Container) .Append (HTML); }} // function play () {__width+= pixel*widthspeed; __Height+= Pixel*Hightspeed; __left- = pixel*widthspeed/2; __top- = pixel*heightspeed/2; var Position = GetPosition (__ Breite, __ Höhe, __ links, __ oben); für (var i = 1; i <= 9; i ++) {setDiv (i, Position ["div"+i]); } if (Position.div1.width <= 0 && Position.div1.Height <= 0 && Position.div9.Width <= 0 && Position.div9.Height <= 0) {window.clearInterval (Hander); $ (Container) .Find ("div.mask"). REMET (); }} // Hander = window.setInterval (spiele, time);} $ (function () {setMaskingAnimation ("#Banner", 858,238,100,2, "#ff0000"); // Einstellung des 4. Parameters und der 5. Parameter ist besser.Das obige dreht sich alles um diesen Artikel, und ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.