Exemple de partage de code du framework de mouvement javascript

Ajoutez une bordure au div, border : 1px solid black

window.onload = function(){
var div = document.getElementById('div1');

div.onclick = function(){
div.onclick setInterval(function(){
div.style.width = div.offsetWidth-1+'px'
},30)
      }
}

En jouant avec le code, on peut constater que la largeur devrait constamment diminuer, mais quoi ? Au contraire, il a augmenté. Pourquoi ?

Il s'avère qu'il y a ces problèmes avec les attributs de la série offset. Corrigeons-les ci-dessous

1. currentStyle est le style actuel, mais il n'est pas compatible avec Google et Firefox

2. getComputedStyle est le style calculé et n'est pas compatible avec ie8--

Le code spécifique est le suivant :

Le paramètre passé obj fait référence à l'objet obtenu, et le nom est l'attribut de style

function getStyle(obj,name){
                                                                                                                utiliser   avec       }else{
                                                              .                                                                                                                                  . 🎜>Down Dans la prochaine étape, nous devons faire évoluer la fonction de déplacement

Nous devons changer la distance de départ de var start = obj.offsetLeft; à var start = parseFloat(getStyle(obj,name));

Parce que getStyle(obj,name) obtient une chaîne, vous avez besoin utiliser parseFloat pour convertir le type

Le code spécifique est le suivant

Également appris avant les fondus entrants et sortants, nous pouvons le faire avec transparence, donc comment faire ?

Tout d'abord, vous devez déterminer s'il existe un attribut d'opacité. Si tel est le cas, vous devez utiliser la transparence * 100, car la transparence est une décimale. Sinon, continuez à utiliser la valeur par défaut.

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

}else{

obj.style[name] = cur +'px';

}

Le code ci-dessus ne peut se déplacer que dans une seule direction, mais je veux descendre les 500 premiers , puis va à gauche 100, que fais-tu ?

J'ai déjà entendu parler des fonctions de rappel. Si je lui transmets une fonction de rappel, est-ce que ça va ?

Lors du déplacement vers la destination, déterminez s'il existe une fonction de rappel. Si tel est le cas, il sera exécuté, sinon il ne sera pas exécuté.

Le code spécifique est le suivant

window.onload = function(){

var oDiv = document.getElementById('div1');

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--
}
>
fonction move(obj,name ,target ,dur,fn){
var count = parseInt(dur/30);//Total times
var start = parseFloat(getStyle(obj,name));//Distance de départ
var dis = cible - début;//Distance
// Longueur du pas
// var step =dis/count;
var n = 0;//Nombre actuel de pas

timer = setInterval (function (){
n++;
var cur = start + n*dis/count;
if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}
obj.style[name] = cur +'px';
if(n == nombre ){
clearInterval(timer)
fn && fn();
}

},30)
}

oDiv.onclick = function(){

move(oDiv,'top',500,3000,function(){
move(oDiv,'left',100,500);
})
}
}

待绝....

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!