js realisiert das gleichmäßige Ein- und Ausblenden von Bildern-js-Tutorial-php.cn

js realisiert das gleichmäßige Ein- und Ausblenden von Bildern

php中世界最好的语言

Freigeben： 2018-04-19 09:15:25

Original

2241 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen die js-Implementierung von BildernEin- und Ausblenden mit konstanter Geschwindigkeit. Was sind die Vorsichtsmaßnahmen, um das Bild in js zu implementieren und einzublenden? und mit gleichmäßiger Geschwindigkeit. Schauen wir uns das Folgende an.

<!DOCTYPE html>
<htmllang="en">
<head>
  <metacharset="UTF-8">
  <title>淡入效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    p {
      border: 2px solid #aaa;
    }
    img {
      width: 300px;
      height: 300px;
      filter: alpha(opacity:30);
      opacity: .3;
      margin: 0 auto;
    }
  </style>
</head>
<body>
<p>
  <imgsrc="img/timg.jpg"alt=""id="img">
</p>
<script>
  var alpha=30;
  var img = document.getElementById("img");
  img.onmouseover=function(){
    startMove(100)
  };
  img.onmouseout=function(){
    startMove(30)
  }
  var timer;
  function startMove(tar) {
    var img = document.getElementById("img");
    clearInterval(timer);
    timer = setInterval(function () {
      var ispeed=0;
      ispeed= alpha<tar?5:-5;
      if(alpha==tar){
        clearInterval(timer)
      }
      else{
        alpha+=ispeed;
        img.style.filter="alpha(opacity:"+alpha+")";
        img.style.opacity=alpha/100;
      }
    }, 30)
  }
</script>
</body>
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonjs realisiert das gleichmäßige Ein- und Ausblenden von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!