Este artigo compartilha o código de implementação específico da animação de máscara de imitação JavaScript para sua referência. O conteúdo específico é o seguinte
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Animação de máscara de flash </ititle> <meta name = "Keywords" content = ""> <meta name = "description" content = "> <script =" utf-8 "src =" jQuery.JS "> Media = "Screen"> Body {Margin: 0;}#Banner {Position: Relity; Width: 858px; Hight: 238px; Overflow: Hidden;} </style> </ad Head> <body> <div Id = "Banner"> <a href = "Javascript: Void (0);"> <Immg "> type = "text/javascript"> function setmaskinganimation (contêiner, largura, altura, tempo, pixel, cor) {var __left = mtrand (parseint (largura*0,25), parseint (largura*0,75)); var __top = mtrand (parseint (altura*0,25), parseint (altura*0,75)); if (largura> = altura) {var widthspeed = parseint ((largura/altura)*10); var altingspeed = 10; var __Width = WidthSpeed; var __Height = altura da altura; } else {var widthspeed = 10; var a altura = parseint ((altura/largura)*10); var __Width = WidthSpeed; var __Height = altura da altura; } var hander; // função getPosition (_width, _height, _left, _top) {var div1 = {"width": _ esquerda, "altura": _ top, "esquerda": 0, "top": 0}; var div2 = {"largura": _ width, "altura": _ top, "esquerda": _ esquerda, "top": 0}; var div3 = {"largura": width -_left -_width, "altura": _ topo, "esquerda": _ esquerda+_width, "top": 0}; var div4 = {"largura": _ esquerda, "altura": _ altura, "top": _ top}; var div5 = {"largura": _ width, "altura": _ altura, "esquerda": _ top}; var div6 = {"largura": width -_left -_width, "altura": _ altura, "esquerda": _ esquerda+_width, "top": _ top}; var div7 = {"largura": _ esquerda, "altura": altura -_top-_height, "esquerda": 0, "top": _ top+_height}; var div8 = {"largura": _ width, "altura": altura-_top-_height, "esquerda": _ esquerda, "top": _ top+_height}; var div9 = {"largura": width -_left -_width, "altura": altura-_top-_height, "esquerda": _ esquerda+_width, "top": _ top+_height}; Retornar {"div1": div1, "div2": div2, "div3": div3, "div4": div4, "div5": div5, "div6": div6, "div7": div7, "div8": div8, "div9": div9,}; } // function mtrand (n1, n2) {return parseint (math.random ()*(n2-n1+1)+n1); } // função setDiv (i, position) {var has = $ (contêiner) .find ("Div.Mask"+i); if (has.length) {has.css ("esquerda", position.left); has.css ("top", position.top); has.css ("largura", posição.width); has.css ("altura", posição.Height); } else {var html = '<div Style = "Posição: Absolute; esquerda: {@esquerda} px; top: {@top} px; largura: {@width} px; altura: {@altura} px; Background-Color: {@BordenColor};"> </div>'; html = html.replace ('{@i}', i); html = html.replace ('{@left}', 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); } $ (contêiner) .append (html); }} // function play () {__width+= pixel*widthspeed; __Height+= Pixel*HeightSpeed; __left- = pixel*widthspeed/2; __top- = pixel*altura de altura/2; Var Position = getPosition (__ largura, __ altura, __ esquerda, __ topo); for (var i = 1; i <= 9; i ++) {setDiv (i, posicionamento ["div"+i]); } if (position.div1.width <= 0 && posicion.div1.height <= 0 && posicion.div9.width <= 0 && posicion.div9.Height <= 0) {window.clearInterval (hander); $ (contêiner) .Find ("Div.Mask"). Remover (); }} // hander = window.setInterval (play, time);} $ (function () {setmaskinganimation ("#banner", 858.238,100,2, "#ff0000"); // definir o 4º parâmetro e o 5º parâmetro, respectivamente, será melhor.///todo </o 5º parâmetro e o 5º parâmetro e o 5º parâmetro) será melhor.O exposto acima é tudo sobre este artigo, e espero que seja útil que todos aprendam programação de JavaScript.