So ändern Sie die Transparenz eines einzelnen Objekts in JS-js-Tutorial-php.cn

So ändern Sie die Transparenz eines einzelnen Objekts in JS

亚连

Freigeben： 2018-06-09 17:36:51

Original

1724 Leute haben es durchsucht

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 anhand von Beispielen analysiert

In diesem Artikel wird am Beispiel der JS-Bewegung erläutert, wie die Transparenz eines einzelnen Objekts geändert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Zusätzlich zum Erzielen des Objektbewegungseffekts durch Ändern der Breite, Höhe, linken Maustaste, oberen Position oder Bewegungsrichtung des Objekts, Ändern der Transparenz des Objekts Das Objekt ist 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>

Nach dem Login kopieren

Aber in js gibt es nur vier Methoden: offsetLeft/Top und offsetWidth/Height, aber es gibt 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; // 自定义一个变量

Nach dem Login kopieren

Wenn Alpha dem Zielwert entspricht Wert, 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 = &#39;alpha(opacity:&#39;+alpha+&#39;)&#39;;
}

Nach dem Login kopieren

Der vollständige Code lautet wie folgt:

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

Nach dem Login kopieren

CSS-Stilteil:

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Welche Methoden gibt es, um der Erkennungssequenz in Vue neue Attribute von Objekten hinzuzufügen?

Wie erreicht man in jQuery den Animationseffekt des Abprallens von der Kante?

So verwenden Sie Sass im Vue CLI Webpack (ausführliche Anleitung)

Implementieren der Additions- und Zuweisungsmethode von Tag-Unterelementen in jQuery

So generieren Sie Zufallszahlen in JS (ausführliches Tutorial)

So ändern Sie die Seitenfarbe in JS (ausführliches Tutorial)

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