Javascript utilise un mouvement uniforme pour obtenir des effets de fondu entrant et sortant (code)-js tutoriel-php.cn

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

不言

Libérer： 2018-08-31 10:19:49

original

1266 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!