Maison > Article > interface Web > Comment implémenter l'effet d'animation du tampon de réponse de la souris ?

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

php中世界最好的语言original: 2018-03-14 17:25:011623parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des instances d'objet intégrées à JSArticle suivant：Explication détaillée des instances d'objet intégrées à JS

Articles Liés

Voir plus