Heim > Artikel > Web-Frontend > Wie implementiert man den Animationseffekt des Mausantwortpuffers?

Wie implementiert man den Animationseffekt des Mausantwortpuffers?

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

Dieses Mal zeige ich Ihnen, wie Sie den Animationseffekt des Mausreaktionspuffers erzielen? Was sind die Vorsichtsmaßnahmen , um den Mausreaktionspuffer-Animationseffekt zu implementieren? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie 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:-100px;
}
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(0);
  }
  p1.onmouseout=function(){
    startMove(-100);
  }
}
var timer=null;
function startMove(itarget){
    clearInterval(timer);
    var p1=document.getElementById("box");
    timer=setInterval(function(){
      var speed=(itarget-p1.offsetLeft)/20;
      speed=speed>0?Math.ceil(speed):Math.floor(speed);
      if(p1.offsetLeft==itarget){
        clearInterval(timer);
      }else{
        p1.style.left=p1.offsetLeft+speed+"px";
      }
    },30)
}
</script>
</body>
</html>

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

Empfohlene Lektüre:

Implementierung eines auf die Maus reagierenden Taobao-Animationseffekts

Implementierung eines auf die Maus reagierenden Transparenzverlaufseffekts

So laden Sie automatisch mehr Inhalte, wenn die Bildlaufleiste nach unten gleitet

Das obige ist der detaillierte Inhalt vonWie implementiert man den Animationseffekt des Mausantwortpuffers?. 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：Detaillierte Erläuterung der in JS integrierten ObjektinstanzenNächster Artikel：Detaillierte Erläuterung der in JS integrierten Objektinstanzen

In Verbindung stehende Artikel

Mehr sehen