JavaScript運動框架之多物體任意值運動的範例程式碼分享（三）-js教程-PHP中文網

JavaScript運動框架之多物體任意值運動的範例程式碼分享（三）

黄舟

發布： 2017-05-21 13:23:01

原創

1360 人瀏覽過

這篇文章主要為大家詳細介紹了JavaScript運動框架的第三部分，多物體任意值運動，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前面兩篇都是單物體的運動，本文開始講多物體的運動，例如多個p的各自不同的屬性如寬，高，字體大小，透明度的緩衝運動變化。

從本文起，就不再使用offsetWdith,offsetHeight了等等，因為會出現問題，比如加個border，offsetWidth就會出現嚴重問題，參見我個人的博客JavaScript中offsetWidth的'bug'及其對策解決方案是封裝getStyle(obj, attr) 函數，用了取得運動中的目前值！

function getStyle(obj, name) {
 if(obj.currentStyle) {//IE
 return obj.currentStyle[name];
 } else {
 return getComputedStyle(obj, false)[name];
 }
}

登入後複製

既然是各個物體各自運動，那麼他們之間有些變數就不能共享，例如計時器，每個物件都應有自己的定時器，因為每次啟動定時器的時候先要清除上一個定時器，這就導致如果第一個物體還在運動，就把滑鼠移到第二個物體，瞬間清除上個定時器，導致第一個物體的運動不能移動到目標值就停下

另外，物體運動的樣式，基本上就兩類：一類是大小也就是px為單位的屬性，還有一類就是透明度！

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>运动框架(三)：多物体运动</title>
 <style type="text/css">
 p {
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 10px;
  float: left;
  filter: alpha(opacity:100);
  opacity: 1;
 }
 </style>
</head>
<body>
 <p id="p1">变高</p>
 <p id="p2">变宽</p>
 <p id="p3">fontSize Changed</p>
 <p id="p4">alpha</p>

 <script type="text/javascript">
 var doc = document;
 var op1 = doc.getElementById(&#39;p1&#39;);
 op1.onmouseover = function() {
  startMove(this, &#39;height&#39;, 300);
 };
 op1.onmouseout = function() {
  startMove(this, &#39;height&#39;, 100);
 };

 var op2 = doc.getElementById(&#39;p2&#39;);
 op2.onmouseover = function() {
  startMove(this, &#39;width&#39;, 300);
 };
 op2.onmouseout = function() {
  startMove(this, &#39;width&#39;, 100);
 };

 var op3 = doc.getElementById(&#39;p3&#39;);
 op3.onmouseover = function() {
  startMove(this, &#39;fontSize&#39;, 30);
 };
 op3.onmouseout = function() {
  startMove(this, &#39;fontSize&#39;, 16);
 };

 var op4 = doc.getElementById(&#39;p4&#39;);
 op4.onmouseover = function() {
  startMove(this, &#39;opacity&#39;, 30);
 };
 op4.onmouseout = function() {
  startMove(this, &#39;opacity&#39;, 100);
 };


 function getStyle(obj, attr) {
  if (obj.currentStyle) {
  return obj.currentStyle[attr];
  } else {
  return getComputedStyle(obj, null)[attr];
  }
 }

 function startMove(obj, attr, iTarget) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
  var cur = 0;
  if (attr === &#39;opacity&#39;) {
   cur = parseFloat(getStyle(obj, attr)) * 100;
  } else {
   cur = parseInt(getStyle(obj, attr));
  }
  var speed = (iTarget - cur) / 10;
  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  if (iTarget == cur) {
   clearInterval(obj.timer);
  } else {
   if (attr === &#39;opacity&#39;) {
   cur += speed;
   obj.style.filter = &#39;alpha(opacity:&#39; + cur + &#39;)&#39;;
   obj.style.opacity = cur / 100;//FireFox && Chrome
   } else {
   cur += speed;
   obj.style[attr] = cur + &#39;px&#39;;  
   }

  }
  }, 30);
 }

 </script>
</body>
</html>

登入後複製

JavaScript運動框架之多物體任意值運動的範例程式碼分享（三）