Implementierung eines auf die Maus reagierenden Transparenzverlaufseffekts-js-Tutorial-php.cn

Implementierung eines auf die Maus reagierenden Transparenzverlaufseffekts

php中世界最好的语言

Freigeben： 2018-03-14 17:12:06

Original

1545 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Implementierung des auf die Maus reagierenden Transparenzverlaufseffekts vorstellen. Was sind die Vorsichtsmaßnahmen, um den auf die Maus reagierenden Transparenzverlaufseffekt zu erzielen? .

Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung des mausresponsiven Animationseffekts mit Transparenzverlauf. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie folgt folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>js动画-透明度变化</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<style>
* {
  margin: 0;
  padding: 0;
  font-family:"微软雅黑"
}
#box{
  height:100px;
  width:100px;
  background-color:#0099CC;
  margin-top:200px;
  position:relative;
  /*透明度变化*/
  left:0px;
  filter:alpha(opacity:30);
  opacity:0.3;
}
span{
  display:block;
  color:blue;
  width:25px;
  height:100px;
  background-color:#FFFF99;
  position:absolute;
  left:100px;
}
</style>
</head>
<body>
  <p id="box">
    <span>移动</span>
  </p>
<script>
window.onload=function(){
  var p1=document.getElementById("box");
  p1.onmouseover=function(){
    startMove(100);
  }
  p1.onmouseout=function(){
    startMove(30);
  }
}
var timer=null;
var alpha=30;
function startMove(itarget){
  clearInterval(timer);
  var p1=document.getElementById("box");
  timer=setInterval(function(){
    var speed=0;
    if(alpha>itarget){
      speed=-10;
    }else{
      speed=10;
    }
    if(alpha==itarget){
      clearInterval(timer);
    }else{
      alpha+=speed;
      p1.style.filter="alpha(opacity:"+alpha+")";
      p1.style.opacity=alpha/100;
    }
  },100)
}
</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:

So verwenden Sie JQuery, um einen Lupeneffekt zu erstellen

JQuery fügt gestaltete HTML-Tags hinzu

Wie jQuery den Wert des Label-Unterelements erhält

Wie jQuery einen Animationseffekt erzeugt, der beim Auftreffen abprallt der Rand des Rahmens

Das obige ist der detaillierte Inhalt vonImplementierung eines auf die Maus reagierenden Transparenzverlaufseffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!