So bedienen Sie JS, um eine Transparenzverlaufsanimation zu implementieren-js-Tutorial-php.cn

So bedienen Sie JS, um eine Transparenzverlaufsanimation zu implementieren

php中世界最好的语言

Freigeben： 2018-06-01 14:40:49

Original

1620 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie JS bedienen, um eine Transparenzverlaufsanimation zu erreichen, und welche Vorsichtsmaßnahmen beim Betrieb von JS gelten, um eine Transparenzverlaufsanimation zu erreichen. Hier ist ein praktischer Fall, schauen wir uns das an.

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
    <title>JS透明度变化效果</title>
    <style>
    body{
      margin: 0px;
      padding: 0px;
    }
    .redb{
      width:200px;
      height: 200px;
      background: red;
      filter:alpha(opacity=30);
      opacity: 0.3;
    }
    </style>
  </head>
  <body>
    <p class="redb" id="opbtn"></p>
    <script>
    window.onload = function(){
      var opp = document.getElementById("opbtn");
      opp.onmouseover = function(){
        startMove(100);
      }
      opp.onmouseout = function(){
        startMove(30);
      }
    }
    var timer = null;
    var alpha = 30;
    var speed = 0;
    function startMove(opTarget){
      clearInterval(timer);
      var opp = document.getElementById("opbtn");
      timer = setInterval(function(){
        if(alpha<opTarget){
          speed = 10;
        }
        else if(alpha>opTarget){
          speed = -10;
        }
        if(alpha==opTarget){
          clearInterval(timer);
        }
        else{
          alpha += speed;
          opp.style.opacity = alpha/100;
          opp.style.filter = 'alpha(opacity='+alpha+')';
        }
      },100);
    }
    </script>
  </body>
</html>

Nach dem Login kopieren

Zusammenfassung:

1. Der Unterschied zwischen Filter und Deckkraft: W3c-Standardtransparenz ist Deckkraft, Filter kann nur vom IE verwendet werden, andere Browser unterstützen Deckkraft
2: Beim Ändern der Transparenz kann der Transparenzwert nicht über eine ähnliche Methode wie offsetLeft ermittelt werden. Sie müssen daher eine separate Variable
erstellen. 3. Vergessen Sie nicht, den Timer dem Timer zuzuweisen

Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie DOM-Knoten in JS

Verwenden der Cache-Aufrufkette zum Implementieren von Schritten zum Neuladen von JS-Methoden Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonSo bedienen Sie JS, um eine Transparenzverlaufsanimation zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!