suchen

Heim  >  Artikel  >  Web-Frontend  >  So bedienen Sie JS, um eine Transparenzverlaufsanimation zu implementieren

So bedienen Sie JS, um eine Transparenzverlaufsanimation zu implementieren

php中世界最好的语言
php中世界最好的语言Original
2018-06-01 14:40:491686Durchsuche

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>

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!

Stellungnahme：
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
Vorheriger Artikel：So verwenden Sie .vue-Code in vscodeNächster Artikel：So verwenden Sie .vue-Code in vscode

In Verbindung stehende Artikel

Mehr sehen