So implementieren Sie JS Motion, um die Transparenz eines einzelnen Objekts zu ändern

In diesem Artikel wird hauptsächlich die Methode der JS-Bewegung zum Ändern der Transparenz eines einzelnen Objekts vorgestellt und die relevanten Betriebstechniken für die dynamische Änderung von Seitenelementattributen in Form von Beispielen analysiert Ich hoffe, es kann allen helfen.

Zusätzlich zum Passieren wird nicht nur die Breite, Höhe, Breite, obere Position oder Bewegungsrichtung des Objekts geändert, um den Bewegungseffekt des Objekts zu erzielen, sondern auch die Transparenz des Objekts auch ein spezieller 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 eine Variable var alpha = 30 definieren; indem wir beurteilen, ob diese Variable dem Zielwert entspricht, können wir mit unserer nächsten Operation fortfahren;

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

Wenn sich Alpha und andere Ziele lohnen, löschen Sie den Timer, andernfalls ändern Sie den Transparenzwert Alpha

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>

Verwandte Empfehlungen;

So legen Sie Transparenz in CSS fest

Verwenden Sie JQUERY, um eine variable Transparenz zu erzielen und den Top-Effekt wieder herzustellen

Vollständiger Code zur Implementierung der CSS3-Deckkraft

Das obige ist der detaillierte Inhalt vonSo implementieren Sie JS Motion, um die Transparenz eines einzelnen Objekts zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!