Le processus d'encapsulation du framework de mouvement JS (exemple de code

Laissez-moi vous poser une question. Il a fallu au total 1 000 millisecondes pour marcher du point de départ A à la destination B. Chaque fois, cela représente 30 millisecondes. Quelles informations en avez-vous obtenues ?

Quelles informations y a-t-il ?

La première, la durée totale est de : 1000 millisecondes

La seconde, à quelle fréquence faut-il marcher ? 30 millisecondes

Troisièmement, nombre total de marches : 1000/30

Quatrièmement, distance : B-A

Cinquièmement, longueur des pas : distance/nombre total de fois

L'idée de mise en œuvre du framework de mouvement est de changer la gauche, le haut, la largeur et la hauteur dans un certain laps de temps, et de s'arrêter après avoir atteint la destination.

Vous pouvez y réfléchir d'abord, comment faire bouger le div sur la page ?

Pensez comme suit : 1. Lors du réglage du div, il est positionné de manière absolue, car ce n'est qu'après le positionnement absolu que les valeurs de gauche, du haut et autres seront affichées sur la page. Sinon le div ne sera pas visible sur la page.

2. Vous pouvez définir un événement de clic pour le div et définir le nombre total de pas, la distance totale dis et la vitesse step=dis/count dans la fonction. nombre actuel de pas et initialisez-le n =0

3. Utilisez ensuite le timer setInterval() pour obtenir la distance actuelle du div et laissez-le bouger.

Le code spécifique est le suivant :                                                                                                                                                                                                                  getElementById ( 'div1'); Nombre de pas

                              var dis = 500-0;

//

Distance

                      var step = dis/count;//
                             var n = 0; // Le nombre actuel d'étapes n++;                                          oDiv.style.left = n* étape + 'px';                                                                                                                                                                    Le code div va Il bouge.
Mais le div ne s'arrêtera pas et continuera de bouger, car aucune condition de fin de mouvement n'est définie pour lui. Dans le code ci-dessus, nous avons défini le nombre actuel d'étapes et le nombre total d'étapes. Lorsque le nombre actuel d'étapes et le nombre total d'étapes sont cohérents, puis effacé le minuteur, le div peut-il être arrêté ? Lorsque le nombre de pas atteint 500, le div s'arrêtera à 500.
Le code amélioré est le suivant :

window.onload = function(){

var oDiv = document.getElementById(' div1 ');
var timer;
oDiv.onclick = function(){
var count = parseInt(1000/30);
//Nombre total de pas effectués

var dis = 500-0;

//distance

var step = dis/count;

//vitesse

var n = 0;

//Nombre actuel d'étapes

timer = setInterval(function(){
n++; oDiv. style .left = n*étape +'px';

                                                                                                                                                                                                                                   (minuterie )                         }; >

Contenu passionnant à suivre...

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!