Comment implémenter l'effet d'animation du tampon de réponse de la souris ?-js tutoriel-php.cn

Comment implémenter l'effet d'animation du tampon de réponse de la souris ?

php中世界最好的语言

Libérer： 2018-03-14 17:25:01

original

1672 Les gens l'ont consulté

Cette fois, je vais vous montrer comment obtenir l'effet d'animation du tampon de réponse de la souris ? Quelles sont les précautions pour implémenter l'effet d'animation du tampon de réponse de la souris ? Ce qui suit est un cas pratique, jetons un oeil.

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

Le code spécifique est le suivant :

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

Je te crois Je l'ai maîtrisé après avoir lu le cas dans cet article. Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Mise en œuvre de l'effet d'animation Taobao réactif à la souris

Mise en œuvre de l'effet de dégradé de transparence sensible à la souris

Comment charger automatiquement plus de contenu lorsque la barre de défilement glisse vers le bas

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!