Analyse der Methode zum Ändern der Transparenz eines einzelnen Objekts mit JS-Bewegung-js-Tutorial-php.cn

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

韦小宝

Freigeben： 2018-01-24 09:56:46

Original

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

Nach dem Login kopieren

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; // 自定义一个变量

Nach dem Login kopieren

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 = &#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 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!