Как только вы услышите это имя, вы узнаете, что эффекты этой структуры могут быть достигнуты онлайн. На самом деле, предыдущая структура движения все еще имела ограничения, то есть несколько значений нельзя перемещать вместе.
Так как решить эту проблему? Давайте посмотрим на предыдущие спортивные рамки
функция getStyle (obj, name) {if (obj.currentStyle) {return obj.currentStyle [name]; } else {return getComputEdstyle (obj, null) [name]; }} function startMove (obj, attr, itarget) {clearInterval (obj.time); obj.time = setInterval (function () {var cur = 0; if (attr == 'непрозрачность') {cur = math.round (parsefloat (getstyle (obj, attr)) * 100);} else {cur = parseint (getStyle (obj, attr);} var speed = (itarget - cur) / 6; speed> 0? Math.floor (speed); }}}}, 30);}Как его изменить? Это на самом деле очень просто. В прошлых рамках вы можете пройти только один стиль и по одному значению за раз. Затем теперь измените их в объект JSON. Я верю, что все поймут.
Когда мы называем это, StartMove (Odiv, {ширина: 200, высота: 200}); При необходимости добавьте функцию обратного вызова. Итак, давайте посмотрим, как изменен код.
функция startMove (obj, json, fnend) {var max = 18; // Каждый таймер называется, работает только один таймер (существующий таймер выключается, когда начинается движение) //, а таймер текущего объекта закрыт или включен, что предотвращает конфликты с другими таймерами на странице, так что каждый таймер не мешает друг другу ClearInterval (obj.timer); obj.timer = setInterval (function () {var bStop = true; // Предполагается: все значения достигли (var in in json) {var itarget = json [name]; // Целевая точка // прозрачность обработки, вы не можете использовать ParseInt, в противном случае это будет 0, если (имя = nopocity ') {// *100. Round Var = Math.Round (parsefloat (getStyle (obj, name))*100); if (math.abs (speed)> max) speed = speed> 0? Max: -max; obj.style [name] = cur+speed+'px'; if (fnend) // Только эта функция передается, вызовите {fnend (); }}}}, 20);}Почему есть предположения о BSTOP?
На самом деле, если я позвоню в StartMove (Odiv, {ширина: 101, высота: 200}); Ширина становится 101, движение было завершено, высота не достигла, но мы, возможно, отключили текущий таймер. Упражнение закончилось, и ошибка произойдет в особых обстоятельствах. Давайте объясним:
На самом деле, требуется все движение, чтобы выключить таймер, прежде чем он достигнет конца. И наоборот, если нет ничего, что невозможно, то выключите его. Программно определить логическое значение, которое вначале верно, предполагая
Все значения прибыли. Если есть значение, которое не равняется целевой точке, BSTOP является ложным. После того, как весь цикл закончился, BSTOP находится в туре, что означает, что все движения были завершены, а таймер выключен в это время.
Затем эта структура движения в основном была завершена, и CSS2 не применим к CSS3.
Суммировать:
Эволюция структуры движения
Startmove (iTarget)
Startmove (obj, iTarget) многообъект
Startmove (obj, attr, itarget) любое значение
Startmove (obj, attr, itarget, fn) цепочка
Startmove (obj, Json, Fn) идеальный спорт
O (∩_∩) o Спасибо ~