JS implementiert die Transparenzgradientenfunktion-js-Tutorial-php.cn

JS implementiert die Transparenzgradientenfunktion

php中世界最好的语言

Freigeben： 2018-05-14 14:36:48

Original

2682 Leute haben es durchsucht

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>

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