Heim > Artikel > Web-Frontend > Javascript verwendet gleichmäßige Bewegungen, um Ein- und Ausblendeffekte zu erzielen (Code)

Javascript verwendet gleichmäßige Bewegungen, um Ein- und Ausblendeffekte zu erzielen (Code)

不言Original: 2018-08-31 10:19:491223Durchsuche

Der Inhalt dieses Artikels befasst sich mit dem Ein- und Ausblendeffekt der einheitlichen JavaScript-Bewegung. Ich hoffe, dass er für Sie hilfreich ist.

Prinzip

Beim Ein- und Ausblenden von Bildern oder Bildern verwenden wir hauptsächlich den Transparenzstilfilter: Alpha (Opazität: 30) ist kompatibel mit z. B. Opazität: 0.3 ist mit Firefox Chrome kompatibel.
Der Timer setInterval;clearInterval;
Wenn die js-Operation ein- und ausgeblendet wird, verwenden Sie das folgende Formular, um den Transparenz-Op.-Stil zu ändern . filter="alpha(opacity:"+alpha+")";op.style.opacity=alpha/100;

Hinweis: Transparenz kann nicht direkt in js beurteilt werden, wir verwenden Alpha Die Parameter werden verglichen und schließlich auf das Objekt angewendet.

Div-Ein- und Ausblenden realisieren

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

Bild-Ein- und Ausblenden realisieren

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

Verwandte Empfehlungen:

Gleichmäßige Javascript-Bewegung, um die Seitenleiste zu erreichen Sharing-Effekt (Code)

js, um das Ein- und Ausblenden von Bildern mit gleichmäßiger Geschwindigkeit zu implementieren

Verwenden Sie jQuery, um Implementieren Sie das Scrollen und Ein- und Ausblenden von Anzeigen

Das obige ist der detaillierte Inhalt vonJavascript verwendet gleichmäßige Bewegungen, um Ein- und Ausblendeffekte zu erzielen (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Vertieftes Verständnis des JavaScript-AusführungsmechanismusNächster Artikel：Vertieftes Verständnis des JavaScript-Ausführungsmechanismus

In Verbindung stehende Artikel

Mehr sehen