Heim > Artikel > Web-Frontend > Implementierung eines auf die Maus reagierenden Transparenzverlaufseffekts

Implementierung eines auf die Maus reagierenden Transparenzverlaufseffekts

php中世界最好的语言Original: 2018-03-14 17:12:061518Durchsuche

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>

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!

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：Jquery-SelektorNächster Artikel：Jquery-Selektor

In Verbindung stehende Artikel

Mehr sehen