Beispielcode für die Bewegung mehrerer Objekte in Javascript-js-Tutorial-php.cn

Beispielcode für die Bewegung mehrerer Objekte in Javascript

不言

Freigeben： 2018-08-31 11:14:16

Original

1377 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit dem Beispielcode für die Bewegung mehrerer Objekte in JavaScript. Ich hoffe, dass er für Freunde hilfreich ist.

Früher haben wir Timer verwendet, um die Bewegung eines einzelnen Objekts zu realisieren. In Projekten bewegen wir oft nicht ein einzelnes Objekt, sondern ändern die Werte mehrerer Objekte.
Hier werden wir die Bewegung mehrerer Objekte und beliebiger Werte durch Ändern von Parametern realisieren. Ein Bewegungsframework, das die Breite, Höhe, Ränder, Schriftgröße, Transparenz und mehr des Objekts ändern kann.

Hinweis: In den obigen Kapiteln verwenden wir alle offsetWidth (offsetWidth umfasst Rahmen und Auffüllung usw.), um Stile festzulegen und zu erhalten, da die Verwendung einfach ist, aber wenn das Objekt enthält Rahmen, Polsterung usw. Beim Stylen wird ein Fehler gemeldet. Daher verwenden wir hier die strengeren Methoden currentStyle und getComputedStyle, um den Stil zu erhalten.
Hinweis: Wir können einige bestimmte Werte nicht wirklich im Computer speichern, z. B. 0,07 * 100. Das Endergebnis ist nicht 7, daher runden und konvertieren wir unten . ist eine ganze Zahl.
Hinweis: Wenn sich mehrere Objekte bewegen, dürfen Timer und einige Parameter nicht gemeinsam genutzt werden, da die Bewegung sonst gelöscht wird, bevor sie abgeschlossen ist, und andere Bewegungen ausgelöst werden. Einige Parameter können ebenfalls nicht gemeinsam genutzt werden. , was dazu führt, dass einige Parameter erneut bedient werden, bevor sie feste Werte erreichen. Daher werden die Timer in den folgenden Beispielen auf Elementen platziert.

Das Folgende ist ein Beispiel dafür, was wir getan haben

<!DOCTYPE html>
<html>

<head>
  <title>运动改变宽度、高度、边框、字体、透明度</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background: red;
      margin: 10px;
      float: left;
      border:1px solid #000;
      font-size:14px;
    }
    div:nth-child(5) {
      filter: alpha(opacity:30);
      opacity:0.3;
    }
  </style>
  <script>
    window.onload = function() {
      var oDiv1 = document.getElementById("div1");
      var oDiv2 = document.getElementById("div2");
      var oDiv3 = document.getElementById("div3");
      var oDiv4 = document.getElementById("div4");
      var oDiv5 = document.getElementById("div5");
      oDiv1.onmouseover=function(){
        startMove(this,"height", 400)
      }
      oDiv1.onmouseout=function(){
        startMove(this,"height", 200)
      }
      oDiv2.onmouseover=function(){
        startMove(this,"width", 400)
      }
      oDiv2.onmouseout=function(){
        startMove(this, "width",200)
      }
      oDiv3.onmouseover=function(){
        startMove(this,"fontSize", 50)
      }
      oDiv3.onmouseout=function(){
        startMove(this, "fontSize",14)
      }

      oDiv4.onmouseover=function(){
        startMove(this,"borderWidth", 100)
      }
      oDiv4.onmouseout=function(){
        startMove(this, "borderWidth",1)
      }
      oDiv5.onmouseover=function(){
        startMove(this,"opacity", 100)
      }
      oDiv5.onmouseout=function(){
        startMove(this, "opacity",30)
      }
    }

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

    function startMove(obj, attr, iTarget) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function() {
        var cur=0;
        if(attr==="opacity"){
          cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能会出现误差0.07*100
        }
        else{
          cur=parseInt(getStyle(obj,attr));
        }
        var speed = (iTarget - cur) / 6;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (cur === iTarget) {
          clearInterval(obj.timer);
        } else {
          if(attr==="opacity"){
            obj.style.filter="alpha(opacity:"+cur+speed+")";
            obj.style.opacity=(cur+speed)/100;
          }else{
            obj.style[attr]=cur+speed+"px";
          }
        }
      }, 30)
    }
  </script>
</head>

<body>
  <div id="div1">变宽</div>
  <div id="div2">变高</div>
  <div id="div3">文字变大</div>
  <div id="div4">borderwidth</div>
  <div id="div5">透明度</div>
</body>

</html>

Nach dem Login kopieren

Verwandte Empfehlungen:

Analyse der Methoden zur Implementierung von Javascript-Multiobjektbewegungen_Javascript-Fähigkeiten

JS-Implementierung von Multi-Objekt-Bewegungsbeispielen

Das obige ist der detaillierte Inhalt vonBeispielcode für die Bewegung mehrerer Objekte in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!