Cet article partage le code d'implémentation spécifique de l'animation de masque flash imitation JavaScript pour votre référence. Le contenu spécifique est le suivant
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> Flash mask animation </ title> <meta name = "keywords" contenu = ""> <meta name = "description" contenu = ""> <script charset = "utf-8" src = "jQuery.js"> </cript> </ script> Media = "Screen"> Body {margin: 0;} # bannière {position: relative; largeur: 858px; hauteur: 238px; débordement: caché;} </ style> </ head> <body> <div id = "Banner"> <a href = "Javascript: Void (0);"> <img src = "1.jpg" /> </a> Type = "Text / JavaScript"> Fonction setMaskingAnimation (conteneur, largeur, hauteur, temps, pixel, couleur) {var __left = mtrand (parseInt (largeur * 0,25), parseInt (largeur * 0,75)); var __top = mtrand (parseInt (hauteur * 0,25), parseInt (hauteur * 0,75)); if (width> = height) {var widethSpeed = paSeInt ((largeur / hauteur) * 10); var hauteur-hauteur = 10; var __Width = widthSpeed; var __height = hauteur-vitesse; } else {var widethSpeed = 10; var heightpeed = paSeInt ((hauteur / largeur) * 10); var __Width = widthSpeed; var __height = hauteur-vitesse; } var handder; // fonction getPosition (_Width, _Height, _left, _top) {var div1 = {"width": _ Left, "height": _ top, "Left": 0, "top": 0}; var div2 = {"width": _ largeur, "hauteur": _ top, "gauche": _ gauche, "haut": 0}; var div3 = {"width": width-_left-_width, "height": _ top, "gauche": _ gauche + _width, "top": 0}; var div4 = {"width": _ gauche, "hauteur": _ hauteur, "top": _ top}; var div5 = {"width": _ largeur, "hauteur": _ hauteur, "gauche": _ top}; var div6 = {"width": width-_left-_width, "height": _ height, "gauche": _ gauche + _width, "top": _ top}; var div7 = {"width": _ Left, "height": height-_top-_height, "Left": 0, "top": _ top + _height}; var div8 = {"width": _ width, "height": height-_top-_height, "gauche": _ gauche, "top": _ top + _height}; var div9 = {"width": width-_left-_width, "height": height-_top-_height, "Left": _ gauche + _width, "top": _ top + _height}; return {"div1": div1, "div2": div2, "div3": div3, "div4": div4, "div5": div5, "div6": div6, "div7": div7, "div8": div8, "div9": div9,}; } // fonction mtrand (n1, n2) {return parseInt (math.random () * (n2-n1 + 1) + n1); } // function setDiv (i, position) {var Has = $ (conteneur) .find ("div.mask" + i); if (has.length) {Has.css ("Left", position.left); has.css ("top", position.top); Has.css ("largeur", position.width); Has.css ("hauteur", position.Height); } else {var html = '<div style = "position: absolue; Left: {@ Left} px; top: {@ top} px; width: {@ width} px; height: {@ height} px; background-Color: {@ background};"> </ 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}', couleur); } $ (conteneur) .append (html); }} // function play () {__width + = pixel * widethSpeed; __Height + = pixel * hauteur-hauteur; __left- = pixel * widethSpeed / 2; __top- = pixel * hauteur-hauteur / 2; Position var = getPosition (__ largeur, __ hauteur, __ gauche, __ haut); pour (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 (Handder); $ (conteneur) .find ("div.mask"). relève (); }} // hainder = window.setinterval (play, time);} $ (function () {setmaskingAnimation ("# banner", 858,238,100,2, "# ff0000"); // définir le 4ème paramètre et le 5ème paramètre respectivement sera meilleur.Ce qui précède concerne cet article, et j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.