Analyse der Methode zum Ändern der Transparenz eines einzelnen Objekts mit JS-Bewegung

In diesem Artikel wird hauptsächlich die Methode der JS-Bewegung zum Ändern der Transparenz eines einzelnen Objekts vorgestellt und die JS-Operationsfähigkeiten im Zusammenhang mit der dynamischen Änderung von Seitenelementattributen anhand von Beispielen analysiert Sie können sich auf diesen Artikel beziehen

Neben dem Erzielen von Objektbewegungseffekten durch Ändern der Breite, Höhe, linken Maustaste, oberen Position oder Bewegungsrichtung des Objekts ist auch das Ändern der Transparenz des Objekts eine Besonderheit Bewegungseffekt

<script>
  window.onload = function () {
    var op = document.getElementById(&#39;p1&#39;);
    op.onmousemove = function () {
      startMove(100);
    }
    op.onmouseout = function () {
      startMove(30);
    }
}
var timer = null;
function startMove(iTarget) {
    clearInterval(timer);
    var op = document.getElementById(&#39;p1&#39;);
    timer = setInterval(function(){
      if(op.offsetAlpha == iTarget){
        ....
      }
    },30);
}
</script>

Aber in js gibt es nur vier Methoden, offsetLeft/Top und offsetWidth/Height, aber keine offsetAlpha-Methode.

F: Wie erhalten wir also die Transparenz des aktuellen Objekts? ?

Wir können selbst eine Variable var alpha = 30 definieren, indem wir beurteilen, ob diese Variable dem Zielwert entspricht.

var alpha = 30; // 自定义一个变量

Wenn Alpha und andere Ziele vorliegen Es lohnt sich, den

Timer zu löschen, andernfalls den Transparenzwert Alpha zu ändern

if(alpha == iTarget){
   clearInterval(timer);
}else{
   alpha += iSpeed;
   op.style.opacity = alpha/100;
   op.style.filter = 'alpha(opacity:'+alpha+')';
}

Der vollständige Code lautet wie folgt:

<p id="p1"></p>

CSS-Stilteil:

<style>
    #p1{
      width: 100px;height: 100px;
      background: green;
      opacity:0.3;
      filter:alpha(opacity:30);/*兼容低版本IE*/
    }
</style>

js-Teil:

<script>
  window.onload = function () {
    var op = document.getElementById(&#39;p1&#39;);
    op.onmousemove = function () {
      startMove(100);
    }
    op.onmouseout = function () {
      startMove(30);
    }
  }
  var timer = null;
  var alpha = 30;
  function startMove(iTarget) {
    clearInterval(timer);
    var op = document.getElementById(&#39;p1&#39;);
    var iSpeed = 0;
    timer = setInterval(function(){
      if(alpha>iTarget){
        iSpeed = -10;
      }else{
        iSpeed = 10;
      }
      if(alpha == iTarget){
        clearInterval(timer);
      }else{
        alpha += iSpeed;
        op.style.opacity = alpha/100;
        op.style.filter = &#39;alpha(opacity:&#39;+alpha+&#39;)&#39;;
      }
    },30);
  }
</script>

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Lernen aller hilfreich sein! !

Verwandte Empfehlungen:

js verpackt in ein Plug-in_Canvas-Statistikdiagramm-Plug-in-Schreibbeispiel

HTML, CSS, Javascript zu Bodenspringen erreichen Seitenlayout

Detaillierte Erläuterung des JavaScript-Modulmodus

Das obige ist der detaillierte Inhalt vonAnalyse der Methode zum Ändern der Transparenz eines einzelnen Objekts mit JS-Bewegung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!