Heim > Web-Frontend > js-Tutorial > Hauptteil

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

小云云
Freigeben: 2018-01-24 09:06:06
Original
1219 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 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>
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 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; // 自定义一个变量
Nach dem Login kopieren

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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage