Javascript: Créer une animation en modifiant le mouvement et la position d’un élément

Author:

Javascript: Créer une animation en modifiant le mouvement et la position d'un élément
Download

 
 

div { padding: 10px; }

#div1 { background-color: #00f;
        color: #fff;
        font-size: larger;
        position: absolute;
        width: 400px;
        height: 200px;
        left: -410px;
        top: -400px;
        }
#div2 { background-color: #ff0;
        color: #;
        font-size: larger;
        position: absolute;
        width: 400px;
        height: 200px;
        left: -410px;
        top: -400px;
        }
#div3 { background-color: #f00;
        color: #fff;
        font-size: larger;
        position: absolute;
        width: 400px;
        height: 200px;
        left: -410px;
        top: -400px;
        }

 

var element = ["div1","div2","div3"];

function next(  ) {
   setTimeout("moveBlock(  )",1000);
}

var x = 0;
var y = 0;
var elem = 0;
function moveBlock(  ) {
   x+=20;
   y+=20;
   var obj = document.getElementById(element[elem]);
   obj.style.top = x + "px";
   obj.style.left = y + "px";
   if (x < (100 + elem * 60)) {
       setTimeout("moveBlock(  )", 100);
   } else {
      elem++;
      x = 0; y = 0;
   }
}


     


 

Cliquez ici pour afficher les Box

JavaScript (quelques fois abrégé JS) est un langage de programmation de scripts principalement utilisé dans les pages web interactives
Le langage a été créé en 1995 par Brendan Eich (Brendan Eich étant .
membre du conseil d'administration de la fondation Mozilla) pour le compte de Netscape Communications Corporation...
Le langage, actuellement à la version 1.8.2 est une implémentation de la 3e version de la norme ECMA-262 qui intègre également des éléments inspirés du langage Python. La version 1.8.5 du langage est prévue pour intégrer la 5e version du standard ECMA

Apprendre JavaScript!

Cet article Javascript: Créer une animation en modifiant le mouvement et la position d’un élément est apparu en premier sur .