Maison >interface Web >js tutoriel >méthode js pour obtenir des effets d'animation similaires à l'animation dans les compétences jquery_javascript

méthode js pour obtenir des effets d'animation similaires à l'animation dans les compétences jquery_javascript

WBOYoriginal: 2016-05-16 16:05:001186parcourir

L'exemple de cet article décrit comment js peut obtenir des effets d'animation similaires à l'animation dans jquery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Cet exemple peut obtenir l'effet de déplacer la souris vers le haut, de changer d'abord la largeur, puis de changer la hauteur, et enfin de changer la transparence, de déplacer la souris vers l'extérieur, puis de revenir en arrière.

Point 1 :

startrun(obj,attr,target,fn)
box.onmouseover = function(){
startrun(box,"width",200,function(){
startrun(box,"height",200,function(){
startrun(box,"opacity","100")
});
});
}

Comme ci-dessus, les fonctions peuvent également être utilisées comme paramètres, ce qui peut avoir pour effet d'exécuter d'abord une action, puis d'exécuter une action.

Point 2 :

if(cur == target){
clearInterval(obj.timer);
if(fn){
fn();
}
}

Lorsque le mouvement atteint le point cible, éteignez la minuterie, puis vous pourrez exécuter la nouvelle fonction.

Enfin, ajoutez le code :

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
<!--
body{margin:0; padding:0; font:12px/1.5 arial;}
#box{width:100px; height:100px; position:absolute;
background:#06c; left:0;filter:alpha(opacity=30); opacity:0.3;}
-->
</style>
<script>
<!--
function getstyle(obj,name){
 if(obj.currentStyle){
  return obj.currentStyle[name];
 }else{
  return getComputedStyle(obj,false)[name];
 }
}
window.onload = function(){
 var box = document.getElementById("box");
 box.onmouseover = function(){
  startrun(box,"width",200,function(){
   startrun(box,"height",200,function(){
    startrun(box,"opacity","100")
   });
  });
 }
 box.onmouseout = function(){
  startrun(box,"height",100,function(){
   startrun(box,"width",100,function(){
    startrun(box,"opacity","30");
   });
  });
 }
}
function startrun(obj,attr,target,fn){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  var cur = 0;
  if(attr == "opacity"){
   cur = Math.round(parseFloat(getstyle(obj,attr))*100);
  }else{
   cur = parseInt(getstyle(obj,attr));
  }
  var speed = (target-cur)/8;
  speed = speed>0&#63;Math.ceil(speed):Math.floor(speed);
  
  if(cur == target){
   clearInterval(obj.timer);
   if(fn){
    fn();
   }
  }else{
   if(attr == "opacity"){
    obj.style.filter = "alpha(opacity="+(cur+speed)+")";
    obj.style.opacity = (cur+speed)/100;
   }else{
   obj.style[attr] = cur + speed + "px";
   }
  }
 },30)
}
//-->
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

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：méthode js pour acquérir des compétences d'échange de mouvement effect_javascriptArticle suivant：méthode js pour acquérir des compétences d'échange de mouvement effect_javascript

Articles Liés

Voir plus