Assim que ouvir esse nome, você saberá que os efeitos dessa estrutura podem basicamente ser alcançados online. De fato, a estrutura de movimento anterior ainda tinha limitações, ou seja, vários valores não podem ser movidos juntos.
Então, como resolver esse problema? Vamos dar uma olhada na estrutura esportiva anterior
função getStyle (obj, nome) {if (obj.currentStyle) {return obj.currentstyle [nome]; } else {return getComputedStyle (obj, null) [nome]; }} função startMove (obj, att, itarget) {clearInterval (obj.time); obj.time = setInterval (function () {var cur = 0; if (att == 'opacity') {cur = math.round (parsefloat (getStyle (obj, att) * 100);} else {curget = parseInt (getStyle (obj,));}} (itarget - Math.floor (velocidade); }}}}, 30);}Como modificá -lo? É realmente muito simples. Nas estruturas anteriores, você só pode passar um estilo e um valor de cada vez. Então agora mude -os em um objeto JSON. Eu acredito que todos vão entender.
Quando chamamos, StartMove (ODIV, {Width: 200, Height: 200}); Se necessário, adicione a função de retorno de chamada. Então, vamos dar uma olhada em como o código é modificado.
função startmove (obj, json, fnend) {var max = 18; // Todo temporizador é chamado, existe apenas um temporizador (o cronômetro existente é desligado quando o movimento começa) // e o temporizador do objeto atual é fechado ou ligado, o que impede conflitos com outros temporizadores na página, para que cada temporizador não interfira um outro nítido (obj.timer); obj.timer=setInterval(function (){ var bStop=true; // Assuming: all values have reached for(var name in json) { var iTarget=json[name]; // Target point// Handle transparency, you cannot use parseInt, otherwise it will be 0 if(name=='opacity') { // *100 There will be error 0000007, etc., so you need to use Math.round() to round var = math.Round (parsefloat (getStyle (obj, nome)*100); VELOCIDADE = VELOCIDADE> 0? Chrome} else {obj.style [Nome] = Cur+Speed+'Px'; if (fnend) // somente esta função é passada, ligue para {fnend (); }}}}, 20);}Por que há alguma suposição sobre o Bstop?
De fato, se eu ligar para o startMove (ODIV, {Width: 101, altura: 200}); A largura se torna 101, o movimento foi concluído, a altura não atingiu, mas podemos ter desligado o cronômetro atual. O exercício terminou e um bug ocorrerá em circunstâncias especiais. Vamos explicar:
De fato, é preciso todo o movimento para desligar o cronômetro antes que ele chegue ao fim. Por outro lado, se não houver nada que não seja possível, desligue -o. Definir programaticamente um valor booleano, que é verdadeiro no começo, assumindo
Todos os valores chegaram. Se houver um valor que não seja igual ao ponto de destino, o Bstop será falso. Depois que todo o ciclo terminar, o BStop está em termos, o que significa que todos os movimentos foram concluídos e o timer está desligado neste momento.
Em seguida, essa estrutura de movimento foi basicamente concluída e o CSS2 não é aplicável ao CSS3.
Resumir:
A evolução da estrutura de movimento
StartMove (Itarget) Motion Frame
StartMove (OBJ, ITARGET) Multi-Object
StartMove (OBJ, Att, ITARGET) qualquer valor
StartMove (OBJ, Att, ITARGET, FN) Motivo de cadeia
StartMove (OBJ, JSON, FN) Esportes perfeitos
O (∩_∩) o obrigado ~