suchen

Heim  >  Artikel  >  Web-Frontend  >  JS implementiert die Transparenzgradientenfunktion

JS implementiert die Transparenzgradientenfunktion

php中世界最好的语言
php中世界最好的语言Original
2018-05-14 14:36:482647Durchsuche

Dieses Mal werde ich Ihnen JS zur Implementierung der Transparenzverlaufsfunktion vorstellen. Was sind die Vorsichtsmaßnahmen für JS zur Implementierung der Transparenzverlaufsfunktion? 

<!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 Methode wie offsetLeft ermittelt werden, daher müssen Sie eine separate Variable
erstellen. 3. Vergessen Sie nicht, den Wert von Timer zuzuweisen zum Timer

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:

Eine Zusammenfassung der Verwendung von Watch in Vue

jQuery sorgt dafür, dass der Schleifenzeitstil automatisch geändert wird Funktion

Das obige ist der detaillierte Inhalt vonJS implementiert die Transparenzgradientenfunktion. 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：Detaillierte Erläuterung der Schritte zur Verwendung von .vue in vscodeNächster Artikel：Detaillierte Erläuterung der Schritte zur Verwendung von .vue in vscode

In Verbindung stehende Artikel

Mehr sehen