Tan pronto como escuche este nombre, sabrá que los efectos de este marco básicamente se pueden lograr en línea. De hecho, el marco de movimiento anterior todavía tenía limitaciones, es decir, varios valores no se pueden mover juntos.
Entonces, ¿cómo resolver este problema? Echemos un vistazo al marco deportivo anterior
función getStyle (obj, nombre) {if (obj.currentStyle) {return obj.CurrentStyle [name]; } else {return getComputedStyle (obj, null) [nombre]; }} función startMove (obj, attr, target) {ClearInterval (obj.time); obj.time = setInterval (function () {var cur = 0; if (attr == 'opacity') {cur = math.round (parsefloat (getStyle (obj, attr)) * 100);} else {cur = parseint (getStyle (obj, attr);} Var velocidad = (ITARGET - CUR) / 6; Speed = Speed> 0? Math.floor (velocidad); }}}, 30);}¿Cómo modificarlo? En realidad es muy simple. En los marcos pasados, solo puede pasar un estilo y un valor a la vez. Luego, ahora cambielos a un objeto JSON. Creo que todos lo entenderán.
Cuando lo llamamos, StartMove (Odiv, {Ancho: 200, altura: 200}); Si es necesario, agregue la función de devolución de llamada. Así que echemos un vistazo a cómo se modifica el código.
función startMove (obj, json, fnend) {var max = 18; // Se llama a cada temporizador, solo hay un temporizador que funciona (el temporizador existente se apaga cuando se inicia el movimiento) // y el temporizador del objeto actual está cerrado o activado, lo que evita los conflictos con otros temporizadores en la página, de modo que cada temporizador no interfiere entre sí ClearInterval (Obj.timer); obj.timer = setInterval (function () {var bstop = true; // Suponiendo: todos los valores han alcanzado (var name var en json) {var itarget = json [name]; // Target Point // Handle Transparency, no puede usar ParseInt, de lo contrario, será 0 si (name == 'opacidad') {// *100 habrá error 000000007, etc., lo que necesite (name == 'opacity') {// *100 habrá error 0000007,, etc., lo que necesite (name == 'opacity') {// *100 habrá error 0000007, etc., lo contrario será 0 si (name == 'opacity') {// *100 habrá error 0000007,, etc., lo contrario será 0 si (name == 'opacity') {// *100 habrá error 0000007,, etc., lo contrario será 0 si usará 0 si use Round var cur = Math.round (parsefloat (getStyle (obj, name))*100); if (math.abs (speed)> max) speed = speed> 0? max: -max; } // Un cierto valor no es igual al punto de destino if (cur! = Itarget) {bstop = false; if (fnend) // Solo se pasa esta función, llame {fnend (); }}}}, 20);}¿Por qué hay alguna suposición sobre Bstop?
De hecho, si llamo a StartMove (Odiv, {ancho: 101, altura: 200}); El ancho se convierte en 101, el movimiento se ha completado, la altura no ha alcanzado, pero es posible que hayamos apagado el temporizador actual. El ejercicio ha terminado y ocurrirá un error en circunstancias especiales. Expliquemos:
De hecho, se necesita todo el movimiento para apagar el temporizador antes de que llegue al final. Por el contrario, si no hay nada que no sea posible, apáguelo. Definir programáticamente un valor booleano, que es cierto al principio, suponiendo
Todos los valores han llegado. Si hay un valor que no es igual al punto de destino, BSTOP es falso. Después de que termine todo el ciclo, BSTOP está en ture, lo que significa que todos los movimientos se han completado y el temporizador está apagado en este momento.
Luego, este marco de movimiento se ha completado básicamente, y CSS2 no es aplicable a CSS3.
Resumir:
La evolución del marco de movimiento
marco de movimiento StartMove (ITARGET)
StartMove (OBJ, ITARGET) Multi-Object
startmove (obj, attr, target) cualquier valor
startmove (obj, attr, target, fn) movimiento de la cadena
Startmove (OBJ, JSON, FN) Deportes perfectos
O (∩_∩) o gracias ~