code du cadre de mouvement javascript

Je suis en retard de quelques jours, désolé !
Continuer à optimiser le code du framework javascript motion.
Il y a un bug dans le code précédent. Lorsque vous cliquez à plusieurs reprises, la vitesse s'accélère. Alors, comment résoudre ce bug ?

Maintenant, résolvons le problème.
C'est en fait très simple
Lorsque vous commencez l'exercice, fermez le minuteur existant.

Pensez-y : comment faire bouger plusieurs objets en même temps, et ils ne s'influenceront pas les uns les autres pour l'instant.
1. Ajoutez une minuterie à chaque objet séparément
2. Lorsque la souris entre, la largeur augmente à 800. Lorsque la souris sort, la largeur diminue lentement jusqu'à la largeur d'origine
Le code spécifique est comme suit :

La position de départ et la position de fin sont aléatoires, en utilisant JSON Pour passer plusieurs valeurs, comment l'écrire ?
Idées d'implémentation : 1. Changez les deux paramètres formels name et target en json
2. Utilisez ensuite une boucle for in. Parcourez les propriétés et les valeurs.

Dans la fonction move(), mettez la position de départ et la distance. Utilisez plutôt json
, ce qui est à peu près le cas.
                                      var start = {};
var dis = {};

for(var nom en json){
start[name] = parseFloat(getStyle(obj,name));
dis[nom] = json[nom] - start[nom];
}

Lors de l'exercice, il y a une courbe de vitesse et de mouvement. Comment écrire ceci ?
Écrivez une condition de jugement et passez un paramètre d'assouplissement. Lorsque la condition est remplie, la vitesse correspondante sera déterminée.
obj.timer = setInterval(function(){
n++;
for(var name in json){
var a = n/count;
switch(easing){
case 'linéaire' :
var cur = start[name] + a*dis[name];
break;
case 'ease-in' :
var cur = start[name] + Math .pow(a,3)*dis[name];
break;
case 'ease-out':
var a = 1-n/count;
var cur = start[name] + (1-Math.pow(a,3))*dis[nom];
break;
}



if(name == 'opacité'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{
obj.style[name] = cur +'px';
}
Bien sûr, il y en a par défaut, et certains n'ont pas besoin d'être définis. Il s'agit de notre framework sportif ultime onload = function(){
var oDiv = document. .getElementsByTagName('p')[0];
          var timer;
function getStyle(obj,name){
//currentStyle : style actuel
if(obj.currentStyle){
return obj.currentStyle[name];//Non compatible avec Google et Firefox
}else{
//getComputedStyle : style calculé
return getComputedStyle(obj,false)[name];//Non compatible avec IE8--
}
}
//complete = dur,easing,fn
function move(obj,json,complete){
clearInterval(obj.timer);

var complete = complete || {};
complete.dur = complete.dur || 1000;
complete.easing = 'ease-out';

var count = parseInt(complete.dur/30);//Total times
var start = {};//{width:300,height:300}
var dis = {};
//{ width:300,height:300}
for(var name in json){
start[name] = parseFloat(getStyle(obj,name)) ;
dis[name] = json[name] - start[name];
}
var n = 0;//Nombre actuel d'étapes
obj.timer = setInterval(function(){
n++;
for(var nom en json ){
var a = n/count;
switch(complete.easing){
case 'linéaire' :
var cur = start [nom] + a*dis[nom];
break;
case 'ease-in':
var cur = start[name] + Math.pow(a,3)*dis[name] ;
break;
case 'ease- out':
var a = 1-n/count;
var cur = start[name] + (1-Math.pow(a,3) )*dis[name];
break;
}



if(name == 'opacity'){
obj.style[name] = cur
obj.style.filter = 'alpha(' +cur*100+')';
}else{
obj.style[name] = cur +'px';
}
}

if(n == count){
clearInterval(obj.timer)
complete.fn && complete.fn();
}

}, 30)
}

oDiv .onmouseover = function(){
move(this,{width:300,height:300},{dur:3000,easing:'ease-in'} )
}
oDiv.onmouseout = function (){
move(this,{width:50,height:50},{dur:3000,fn:function(){
move(oDiv,{opacity:0})
}})
}

}

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!