Maison >interface Web >js tutoriel >Javascript utilise un mouvement uniforme pour obtenir des effets de fondu entrant et sortant (code)

Javascript utilise un mouvement uniforme pour obtenir des effets de fondu entrant et sortant (code)

不言original: 2018-08-31 10:19:491264parcourir

Le contenu de cet article concerne l'effet de fondu d'entrée et de sortie du mouvement uniforme JavaScript (code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Principe

Lorsque nous effectuons des fondus entrants et sortants de p ou d'images, nous utilisons principalement le filtre de style de transparence : alpha(opacity:30) est compatible avec, par exemple, l'opacité : 0.3 est compatible Firefox Chrome.
La minuterie setInterval;clearInterval;
Lorsque l'opération js apparaît et disparaît en fondu, utilisez le formulaire suivant pour modifier l'op.style de transparence . filter="alpha(opacity:"+alpha+"");op.style.opacity=alpha/100;

Remarque : la transparence ne peut pas être jugée directement en js, nous utilisons alpha Les paramètres sont comparés et finalement appliqués à l'objet.

Réaliser un fondu entrant et sortant div

<!DOCTYPE html>
<html>
  <head>
    <title>div淡入淡出</title>
    <style>
      #div1{
        width: 200px;
        height: 200px;
        background: red;
        /* ie */
        filter: alpha(opacity:30);
        /* chrome firefox */
        opacity:0.3;
      }
    </style>
    <script>
      window.onload=function(){
        var oDiv=document.getElementById("div1");
        oDiv.onmouseover=function(){
          startMove(100);
        }
        oDiv.onmouseout=function(){
          startMove(30);
        }
      }
      var timer=null;
      var alpha=30;//透明度默认30
      function startMove(iTarget){
        var oDiv=document.getElementById("div1");
        clearInterval(timer);
        timer=setInterval(function(){
          var speed=0;
          if(alpha<iTarget){
            speed=5;
          }else{
            speed=-5;
          }
          if(alpha===iTarget){
            clearInterval(timer);
          }else{
            alpha+=speed;
            oDiv.style.filter="alpha(opacity:"+alpha+")";
            oDiv.style.opacity=alpha/100;
          }
        },30);
      }
    </script>
  </head>
  <body>
    <div id="div1"></div>
  </body>
</html>

Réaliser un fondu entrant et sortant d'image

<!DOCTYPE html>
<html>
  <head>
    <title>图片淡入淡出</title>
    <style>
      #img1{
        /* ie */
        filter: alpha(opacity:30);
        /* chrome firefox */
        opacity: 0.3;
        border: 1px solid #000;
      }
    </style>
    <script>
      window.onload=function(){
        var oImg=document.getElementById("img1");
        oImg.onmouseover=function(){
          startMove(100);
        }
        oImg.onmouseout=function(){
          startMove(30);
        }
      }
      var timer=null;
      var alpha=30;//透明度默认30
      function startMove(iTarget){
        var oImg=document.getElementById("img1");
        clearInterval(timer);
        timer=setInterval(function(){
          var speed=0;
          if(alpha<iTarget){
            speed=5;
          }else{
            speed=-5;
          }
          if(alpha===iTarget){
            clearInterval(timer);
          }else{
            alpha+=speed;
            oImg.style.filter="alpha(opacity:"+alpha+")";
            oImg.style.opacity=alpha/100;
          }
        },30);
      }
    </script>
  </head>
  <body>
    <img id="img1" src="img1.jpg" alt="">
  </body>
</html>

Recommandations associées :

uniforme javascript mouvement pour obtenir un effet de partage de colonne latérale (code)

js pour obtenir un fondu d'entrée et de sortie uniforme des images

Utilisez jQuery pour implémenter le défilement des annonces, ainsi que les fondus entrants et sortants

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：Compréhension approfondie du mécanisme d'exécution de JavaScriptArticle suivant：Compréhension approfondie du mécanisme d'exécution de JavaScript

Articles Liés

Voir plus