Maison > Article > interface Web > Comment utiliser JS pour implémenter une animation de dégradé de transparence

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

php中世界最好的语言original: 2018-06-01 14:40:491662parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser le code .vue dans vscodeArticle suivant：Comment utiliser le code .vue dans vscode

Articles Liés

Voir plus