この記事では、参照用のJavaScript Imitation Imitation Flash Maskアニメーションの特定の実装コードを共有しています。特定のコンテンツは次のとおりです
< Media = "screen"> body {margin：0;}＃banner {position：relative; width：858px; height：238px; hidden;} </style> </head> <body> <div div = "banner"> <a href = "javascript：void（0）;" type = "text/javascript"> function setmaskinganimation（コンテナ、幅、高さ、時間、ピクセル、色）{var __left = mtrand（parseint（width*0.25）、parseint（width*0.75））; var __top = mtrand（parseint（height*0.25）、parseint（height*0.75））; if（width> = height）{var widthspeed = parseint（（width/height）*10）; var heightspeed = 10; var __width = widthspeed; var __height = heightSpeed; } else {var widthspeed = 10; var heightspeed = parseint（（height/width）*10）; var __width = widthspeed; var __height = heightSpeed; } var Hander; //関数GetPosition（_Width、_Height、_Left、_Top）{var div1 = {"width"：_ left、 "height"：_ top、 "left"：0、 "top"：0}; var div2 = {"width"：_ width、 "height"：_ top、 "left"：_ left、 "top"：0}; var div3 = {"width"：width-_left-_width、 "height"：_ top、 "left"：_ left+_width、 "top"：0}; var div4 = {"width"：_ left、 "height"：_ height、 "top"：_ top}; var div5 = {"width"：_ width、 "height"：_ height、 "left"：_ top}; var div6 = {"width"：width-_left-_width、 "height"：_ height、 "left"：_ left+_width、 "top"：_ top}; var div7 = {"width"：_ left、 "height"：height-_top-_height、 "left"：0、 "top"：_ top+_height}; var div8 = {"width"：_ width、 "height"：height-_top-_height、 "left"：_ left、 "top"：_ top+_height}; var div9 = {"width"：width-_left-_width、 "height"：height-_top-_height、 "left"：_ left+_width、 "top"：_ top+_height}; return {"div1"：div1、 "div2"：div2、 "div3"：div3 "、" div4 "：div4、" div5 "：div5、"：div6、 "div7"：div7、 "div8"、 "div9"：div9、}; } //関数mtrand（n1、n2）{return parseint（math.random（）*（n2-n1+1）+n1）; } // function setDiv（i、position）{var has = $（container）.find（ "div.mask"+i）; if（has.length）{has.css（ "left"、position.left）; has.css（ "top"、position.top）; has.css（ "width"、position.width）; has.css（ "height"、position.height）; } else {var html = '<div style = "position：absolute;左：{@左} px; top：{@top} px; width：{@width} px; height：{@height} px; background-color：{@backgroundcolor};"> </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}'、 "透過"）; } else {html = html.replace（ '{@backgroundcolor}'、color）; } $（container）.append（html）; }} // function play（）{__width+= pixel*widthspeed; __height+= pixel*heightspeed; __Left- = pixel*widthspeed/2; __top- = pixel*heightspeed/2; var position = getposition（__ width、__ height、__左、__トップ）; for（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"）。remove（）; }} // hander = window.setInterval（play、time）;} $（function（）{setmaskinganimation（ "＃banner"、858,238,100,2、 "＃ff0000"）; //それぞれ4番目のパラメーターと5番目のパラメーターを設定します。上記はこの記事に関するものであり、誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。