이 기사는 참조를 위해 JavaScript 모방 플래시 마스크 애니메이션의 특정 구현 코드를 공유합니다. 특정 내용은 다음과 같습니다
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 플래시 마스크 애니메이션 </title> <meta name = "keywords"content = ""> <meta name = "description"content = "" "> <script charset ="utf-8 "src ="jquery.js "> <style> <style> < 미디어 = "스크린"> 바디 {마진 : 0;}#배너 {위치 : 상대; 너비 : 858px; 높이 : 238px; 오버 플로우 : hidden;} </style> </head> <body> <div id = "배너"> <a href = "javaScript : void (0);"> <img src = 1.JPG "/> </> <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)); if (너비> = 높이) {var widthspeed = parseint ((너비/높이)*10); var heightspeed = 10; var __width = widthspeed; var __height = heightspeed; } else {var widthspeed = 10; var heightspeed = parseint ((높이/너비)*10); var __width = widthspeed; var __height = heightspeed; } var 핸들; // 함수 getPosition (_width, _height, _left, _top) {var div1 = { "width": _ _ left, "height": _ top, "왼쪽": 0, "상단": 0}; var div2 = { "너비": _ 너비, "높이": _ 상단 "왼쪽": _ 왼쪽, "상단": 0}; var div3 = { "width": width-_left-_width, "높이": _ 상단, "왼쪽": _ 왼쪽+_width, "상단": 0}; var div4 = { "너비": _ 왼쪽, "높이": _ 높이 "상단": _ top}; var div5 = { "너비": _ 너비, "높이": _ 높이 "왼쪽": _ top}; var div6 = { "width": width-_left-_width, "높이": _ 높이, "왼쪽": _ 왼쪽+_width, "상단": _ top}; var div7 = { "너비": _ 왼쪽, "높이": height-_top-_height, "왼쪽": 0, "상단": _ top+_height}; var div8 = { "width": _ width, "height": height-_top-_height, "왼쪽": _ 왼쪽, "상단": _ top+_height}; var div9 = { "width": width-_left-_width, "height": height-_top-_height, "left": _ left+_width, "top": _ top+_height}; return { "div1": "div1 :"div2 ":"div3 ": div3,"div4 ":"div5 ":"div5 ": div6": div6, "div7": "div8": "div8": div9,}; } // 함수 Mtrand (n1, n2) {return parseint (math.random ()*(n2-n1+1)+n1); } // function setDiv (i, 위치) {var has = $ (컨테이너) .find ( "div.mask"+i); if (has.length) {has.css ( "왼쪽", position.left); has.css ( "상단", position.top); has.css ( "width", position.width); has.css ( "높이", 위치. 높이); } else {var html = '<div style = "위치 : 절대; 왼쪽 : {@left} px; top : {@top} px; 너비 : {@width} px; 높이 : {@height} px; back 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*widthspeed; __height+= 픽셀*높이 전문가; __Left- = 픽셀*너비 스피드/2; __top- = 픽셀*heightspeed/2; var position = getposition (__ 너비, __ 높이, __ 왼쪽, __ 상단); for (var i = 1; i <= 9; i ++) {setDiv (i, 위치 [ "div"+i]); } if (position.div1.width <= 0 && position.div1.height <= 0 && position.div9.width <= 0 && position.div9.height <= 0) {window.clearInterval (핸들러); $ (컨테이너) .find ( "div.mask"). remove (); }} // hander = wind위의 내용은이 기사에 관한 모든 것이며, 모든 사람이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.