Heim > Artikel > Web-Frontend > Gemeinsame Nutzung von JavaScript-Motion-Framework-Beispielcode für die Bewegung beliebiger Werte mehrerer Objekte (3)

Gemeinsame Nutzung von JavaScript-Motion-Framework-Beispielcode für die Bewegung beliebiger Werte mehrerer Objekte (3)

黄舟Original: 2017-05-21 13:23:011303Durchsuche

Dieser Artikel stellt hauptsächlich den dritten Teil des JavaScriptMotionFrameworks im Detail vor, die Bewegung mit beliebigem Wert für mehrere Objekte, die für Interessierte einen gewissen Referenzwert hat bis

In den beiden vorherigen Artikeln geht es um die Bewegung eines einzelnen Objekts. In diesem Artikel geht es zunächst um die Bewegung mehrerer Objekte, beispielsweise um die verschiedenen Attribute mehrerer ps wie Breite, Höhe, Schriftgröße, Pufferbewegungsänderungen für Transparenz.

Ab diesem Artikel werden offsetWdith, offsetHeight usw. nicht mehr verwendet, da Probleme auftreten, z. B. das Hinzufügen eines Rahmens, offsetWidth verursacht schwerwiegende Probleme, siehe den „Fehler“ von offsetWidth in JavaScript Mein persönlicher Blog Die Gegenmaßnahme und Lösung besteht darin, die Funktion getStyle(obj, attr) zu kapseln und damit den aktuellen Wert in Bewegung zu erhalten!

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

Da sich jedes Objekt unabhängig bewegt, können einige Variablen nicht zwischen ihnen geteilt werden, wie z. B. Timer, jedes ObjektJeder Timer sollte dies tun Es gibt einen eigenen Timer, denn jedes Mal, wenn der Timer gestartet wird, muss der vorherige Timer gelöscht werden. Das heißt, wenn sich das erste Objekt noch bewegt, bewegen Sie einfach die Maus zum zweiten Objekt und löschen Sie es sofort des ersten Objekts, das angehalten wird, wenn es den Zielwert nicht erreichen kann

Darüber hinaus gibt es grundsätzlich zwei Arten von Objektbewegungsstilen: eine ist die Größe, die in px-Eigenschaften angegeben ist, und eine andere Kategorie ist Transparenz!

<!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>

Gemeinsame Nutzung von JavaScript-Motion-Framework-Beispielcode für die Bewegung beliebiger Werte mehrerer Objekte (3)

Das obige ist der detaillierte Inhalt vonGemeinsame Nutzung von JavaScript-Motion-Framework-Beispielcode für die Bewegung beliebiger Werte mehrerer Objekte (3). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So lösen Sie das Anti-Shake-Problem und suspendierte Couplets im JavaScript-Motion-Framework (2)Nächster Artikel：So lösen Sie das Anti-Shake-Problem und suspendierte Couplets im JavaScript-Motion-Framework (2)

In Verbindung stehende Artikel

Mehr sehen