Comment utiliser JS pour implémenter une animation de dégradé de transparence-js tutoriel-php.cn

Comment utiliser JS pour implémenter une animation de dégradé de transparence

php中世界最好的语言

Libérer： 2018-06-01 14:40:49

original

1689 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser JS pour réaliser une animation en dégradé de transparence, et quelles sont les précautions lors de l'utilisation de JS pour réaliser une animation en dégradé de transparence. Voici un cas pratique, jetons un coup d'œil.

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

Copier après la connexion

Résumé :

1. La différence entre le filtre et l'opacité : la transparence standard du w3c est l'opacité, le filtre ne peut être utilisé que par IE, d'autres navigateurs prennent en charge l'opacité.
2. Lors de la modification de la transparence, la valeur de transparence ne peut pas être obtenue par une méthode similaire à offsetLeft, vous devez donc créer une variable distincte
3. N'oubliez pas d'attribuer la valeur de timer to timer

Je crois que vous l'avez lu Vous maîtrisez la méthode dans le cas de cet article Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser les nœuds DOM dans JS

Utiliser la chaîne d'appel du cache pour implémenter les étapes de rechargement de la méthode JS Explication détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!