suchen

Heim >Web-Frontend >js-Tutorial >Von jQuery implementierter Maus-Antwortpuffer-Animationseffekt

Von jQuery implementierter Maus-Antwortpuffer-Animationseffekt

亚连
亚连Original
2018-06-05 17:45:191792Durchsuche

In diesem Artikel wird hauptsächlich der von jQuery implementierte Mausantwortpuffer-Animationseffekt vorgestellt, der die jQuery-Ereignisantwort, die numerische Operation und die dynamische Operation von Seitenelementen umfasst.

Dieser Artikel beschreibt das jQuery-Beispiel Animationseffekt für den Maus-Antwortpuffer implementiert. 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:-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>

oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Wie lege ich globale Variablen in vue2 fest? (Detailliertes Tutorial)

Globale Variablen oder Datenmethoden gemäß Vue festlegen (Detailliertes Tutorial)

So implementieren Sie String-Splicing in JS Function ( erweitert String.prototype.format)

Das obige ist der detaillierte Inhalt vonVon jQuery implementierter Maus-Antwortpuffer-Animationseffekt. 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：So implementieren Sie einen auf die Maus reagierenden Taobao-Animationseffekt in jQueryNächster Artikel：So implementieren Sie einen auf die Maus reagierenden Taobao-Animationseffekt in jQuery

In Verbindung stehende Artikel

Mehr sehen