JavaScript運動架構 多值運動（四），javascript運動架構

JavaScript運動架構 多值運動（四），javascript運動架構

多值運動，也就是對於某個對象來說，不僅僅只是其中一個屬性值在變化，而是好多個，比如寬，高，字型，透明度等等同時變化

當然了，多值運動會產生一個問題，就是定時器何時關閉的問題！當然是所有的屬性值都運動到目標值了才能清理定時器，也就是等最慢的。就好比十個人一起聚餐，不能等到來一個人就開吃！

前幾篇講的都是一個元素對象中某一個屬性的運動，這次講同一個元素對象中多個屬性值的緩衝運動，那麼每個屬性都有個終點（目標點），我們把這些屬性及其目標值寫成一個對象的形式，或者是json狀！容易產生的問題就是上面說的，這裡用了共同的速度函數，但有的屬性值從100 –> 101, 有的屬性值從100 –> 600，你得等耗時最長的屬性值到達目標值才能關閉該obj所擁有的定時器，設計的思路就是每次執行輪詢函數設定一個bStob = true;在遍曆掃描json中屬性的時候，只要有沒到到目標值的屬性，就設為false，這樣定時器就不會關閉，即使有的屬性值已經到達終點，此時輪詢依舊會執行掃描，只不過此時該屬性運動速度為0了，也不會運動了。也就是之前：

if(attr == cur) { cleartInterval(obj.timer);}

要增強為：

if (bStop) { clearInterval(obj.timer);}

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>運動架構(四)：多值運動</title> <style type="text/css"> div {  width: 100px;  height: 100px;  background: orange;  margin: 10px;  float: left; } </style></head><body> <div id="div1"></div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); oDiv.onmouseover = function() {  var json = {  width: 600,  height: 200,  opacity: 30  };  startMove(this, json); }; oDiv.onmouseout = function() {  var json = {  width: 100,  height: 100,  opacity: 100  };  startMove(this, json); }; function getStyle(obj, attr) {  if (obj.currentStyle) {  return obj.currentStyle[attr];  } else {  return getComputedStyle(obj, false)[attr];  } } function startMove(obj, json) {  clearInterval(obj.timer);  obj.timer = setInterval(function() {  var bStop = true;  for (var attr in json) {   var cur = 0;   if (attr === 'opacity') {   cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);   } else {   cur = parseInt(getStyle(obj, attr));   }   var speed = (json[attr] - cur) / 10;   speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   if (cur != json[attr]) {//凡是有未到達目標點的，一律不讓定時器停下，否則有的屬性不能到達目標值   bStop = false;   }   if (attr === 'opacity') {   cur += speed;   obj.style.filter = 'alpha(opacity:' + cur + ')';   obj.style.opacity = cur / 100;//Chrome,IE   } else {   obj.style[attr] = cur + speed + 'px';   }  }  //整個迴圈結束後，仍然保持著true，說明沒有沒到達目標值的屬性，也就是都到了  if (bStop) {   clearInterval(obj.timer);//說明所有的屬性都到達了目標值  }  }, 30); } </script></body></html>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。