تشارك هذه المقالة رمز التنفيذ المحدد لـ JavaScript Imitation Flash Mask الرسوم المتحركة للرجوع إليه. المحتوى المحدد كما يلي
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> الرسوم المتحركة لقناع الفلاش </title> <meta name = "keywords" content = ""> <meta name = "description" media = "screen"> body {margin: 0 ؛}#banner {الموضع: النسبية ؛ العرض: 858px ؛ الارتفاع: 238px ؛ overflow: hidden ؛} </style> </head> <body> <div id = "banner"> <a href = "javaScript: 0) ؛"> img src = type = "text/javaScript"> setmaskinganimation (الحاوية ، العرض ، الطول ، الوقت ، بكسل ، لون) {var __left = mtrand (parseint (width*0.25) ، parseint (width*0.75)) ؛ var __top = mtrand (parseint (الارتفاع*0.25) ، parseint (الارتفاع*0.75)) ؛ إذا (العرض> = الارتفاع) {var widthspeed = parseint ((العرض/الارتفاع)*10) ؛ var heightspeed = 10 ؛ var __width = widthpeed ؛ var __height = heightspeed ؛ } آخر {var widthspeed = 10 ؛ var heightspeed = parseint ((الارتفاع/العرض)*10) ؛ var __width = widthpeed ؛ var __height = heightspeed ؛ } var hander ؛ // function 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": _ Quep ، "TOP": _ TOP} ؛ var div5 = {"width": _ العرض ، "الارتفاع": _ الارتفاع ، "اليسار": _ TOP} ؛ var div6 = {"width": width-_left-_width ، "الارتفاع": _ الارتفاع ، "اليسار": _ 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:" Div6 ، "Div7": } // function 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 ("العرض" ، position.width) ؛ HAS.CSS ("الارتفاع" ، الموضع. HIGHT) ؛ } else {var html = '<div style = "الموضع: absolute ؛ left: {@left} 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}' ، "Transparent") ؛ } else {html = html.replace ('{@backgroundColor}' ، color) ؛ } $ (حاوية) .append (html) ؛ }} // function play () {__width+= pixel*widthpeed ؛ __height+= pixel*heightspeed ؛ __left- = pixel*widthspeed/2 ؛ __top- = pixel*heightspeed/2 ؛ var position = getPosition (__ عرض ، __ ارتفاع ، __ اليسار ، __ TOP) ؛ لـ (var i = 1 ؛ i <= 9 ؛ i ++) {setDiv (i ، موضع ["div"+i]) ؛ } if (position.div1.width <= 0 && position.div1.height <= 0 && position.div9 $ (حاوية) .find ("div.mask"). إزالة () ؛ }} // hander = window.setinterval (play ، time) ؛} $ (function () {setmaskinganimation ("#banner" ، 858،238،100،2 ، "#ff0000") ؛ // تعيين المعلمة الرابعة والمعلمة الخامسة على التوالي.ما سبق هو كل شيء عن هذا المقال ، وآمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.