Este artículo comparte el código de implementación específico de la animación de máscara de imitación de imitación JavaScript para su referencia. El contenido específico es el siguiente
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> Flash Mask Animation </title> <meta name = "Keywords" content = ""> <meta name = "descripción" content = ""> <script = "utf-8" src = "jQuery.js"> </script> <style style Media = "Screen"> Body {margin: 0;}#banner {posición: relativo; ancho: 858px; altura: 238px; overflow: hidden;} </ystye> </thead> <body> <Div id = "banner"> <a href = "javaScript: void (0);"> <img src = "1.jpg" type = "text/javaScript"> función setMaskingAnimation (contenedor, ancho, altura, tiempo, píxel, color) {var __left = mtrand (parseint (ancho*0.25), parseint (ancho*0.75)); var __top = mtrand (parseint (altura*0.25), parseint (altura*0.75)); if (ancho> = altura) {var widthspeed = parseInt ((ancho/altura)*10); var hightspeed = 10; var __width = widthspeed; var __Height = HeightSpeed; } else {var widthspeed = 10; var hightspeed = parseInt ((altura/ancho)*10); var __width = widthspeed; var __Height = HeightSpeed; } var gander; // función getPosition (_Width, _Height, _left, _Top) {var div1 = {"ancho": _ izquierda, "altura": _ superior, "izquierda": 0, "superior": 0}; var div2 = {"ancho": _ ancho, "altura": _ arriba, "izquierda": _ izquierda, "arriba": 0}; var div3 = {"ancho": width -_left -_width, "altura": _ superior, "izquierda": _ izquierda+_width, "top": 0}; var div4 = {"ancho": _ izquierda, "altura": _ altura, "arriba": _ superior}; var div5 = {"ancho": _ ancho, "altura": _ altura, "izquierda": _ top}; var div6 = {"width": width -_left -_width, "altura": _ altura, "izquierda": _ izquierda+_width, "top": _ top}; var div7 = {"ancho": _ izquierda, "altura": altura -_top -_Height, "izquierda": 0, "superior": _ top+_height}; var div8 = {"ancho": _ ancho, "altura": altura -_top -_height, "izquierda": _ izquierda, "superior": _ top+_Height}; var div9 = {"width": width -_left -_width, "altura": altura -_top -_Height, "izquierda": _ izquierda+_width, "top": _ top+_Height}; regreso {"Div1": Div1, "Div2": Div2, "Div3": Div3, "Div4": Div4, "Div5": Div5, "Div6": Div6, "Div7": Div7, "Div8": Div8, "Div9": Div9,}; } // función mtrand (n1, n2) {return parseInt (math.random ()*(n2-n1+1)+n1); } // función setDiv (i, posición) {var ha = $ (contenedor) .find ("div.mask"+i); if (has.length) {has.css ("izquierda", posición.left); HAS.CSS ("TOP", POSICIÓN.TOP); HAS.CSS ("Ancho", posicion.Width); HAES.CSS ("altura", posición.Height); } else {var html = '<div style = "Position: Absolute; Left: {@Left} px; top: {@top} px; width: {@width} px; Height: {@altura} Px; Color de fondo: {@@Backgroundcolor};"> </div>'; html = html.replace ('{@i}', i); html = html.replace ('{@izquierda}', posición.left); html = html.replace ('{@top}', posicion.top); html = html.replace ('{@width}', posicion.width); html = html.replace ('{@altura}', posicion.height); if (i == 5) {html = html.replace ('{@en segundo plano}', "transparente"); } else {html = html.replace ('{@en segundo plano}', color); } $ (contenedor) .append (html); }} // function play () {__width+= pixel*widthspeed; __Height+= Pixel*HeightSpeed; __left- = píxel*widthspeed/2; __top- = píxel*Heightspeed/2; VAR POSICIÓN = getPosition (__ ancho, __ altura, __ izquierda, __ arriba); para (var i = 1; i <= 9; i ++) {setDiv (i, posición ["div"+i]); } if (posicion.div1.width <= 0 && posicion.div1.height <= 0 && posicion.div9.width <= 0 && posicion.div9.height <= 0) {window.clearinterval (hander); $ (contenedor) .find ("div.mask"). remove (); }} // hander = window.setInterval (Play, Time);} $ (function () {setMaskingAnimation ("#banner", 858,238,100,2, "#ff0000"); // configurar el 4to parámetro y el quinto parámetro respectivamente será mejor.Lo anterior se trata de este artículo, y espero que sea útil para todos aprender la programación de JavaScript.