Wie implementiert man den Animationseffekt des Mausantwortpuffers?-js-Tutorial-php.cn

Wie implementiert man den Animationseffekt des Mausantwortpuffers?

php中世界最好的语言

Freigeben： 2018-03-14 17:25:01

Original

1667 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!