Effet d'animation du tampon de réponse de la souris implémenté par jQuery-js tutoriel-php.cn

Effet d'animation du tampon de réponse de la souris implémenté par jQuery

亚连

Libérer： 2018-06-05 17:45:19

original

1756 Les gens l'ont consulté

Cet article présente principalement l'effet d'animation du tampon de réponse de la souris implémenté par jQuery, impliquant la réponse aux événements jQuery, l'opération numérique et l'opération dynamique des éléments de page. Les amis dans le besoin peuvent s'y référer

Cet article décrit l'exemple jQuery. Implémentation de l'effet d'animation du tampon de réponse de la souris. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Jetons d'abord un coup d'œil à l'effet de course :

Le code spécifique est le suivant suit :

<!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>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment définir des variables globales dans vue2 ? (Tutoriel détaillé)

Définir des variables globales ou des méthodes de données en fonction de la vue (Tutoriel détaillé)

Comment implémenter l'épissage de chaînes dans la fonction JS ( extends String.prototype.format)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!