recherche

Maison  >  Article  >  interface Web  >  Un effet d'animation simple implémenté dans les compétences natives javascript_javascript

Un effet d'animation simple implémenté dans les compétences natives javascript_javascript

WBOY
WBOYoriginal
2016-05-16 15:07:211913parcourir

Cet article vous présente une animation implémentée en javascript. Lorsque vous cliquez sur le bouton Démarrer, le div se déplacera vers la droite. Lorsque vous cliquez sur Arrêter, le div cessera de bouger. Si vous cliquez à nouveau, il continuera à se déplacer. Veuillez consulter le code ci-dessous. 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<head>
<title>javascript实现的简单动画</title>
<style type="text/css">
#mydiv
{
 width:50px;
 height:50px;
 background-color:green;
 position:absolute;
}
</style>
<script type="text/javascript"> 
window.onload=function()
{
 var mydiv=document.getElementById("mydiv");
 var start=document.getElementById("start");
 var stopmove=document.getElementById("stopmove");
 var x=0;
 var flag;
 function move()
 {
  x=x+1;
  mydiv.style.left=x+"px";
 }
 start.onclick=function()
 {
  clearInterval(flag);
  flag=setInterval(move,20);
 }
 stopmove.onclick=function()
 {
  clearInterval(flag);
 }
 
}
</script>
<body>
<input type="button" id="start" value="开始运动" />
<input type="button" id="stopmove" value="停止运动" />
<div id="mydiv"></div>
</body>
</html>

Explication du code :


1.window.onload=function(){}, lorsque le contenu du document est complètement chargé, exécutez le code dans la fonction.
2.var mydiv=document.getElementById("mydiv"), récupère l'élément dont la valeur de l'attribut id est mydiv.
3.var start=document.getElementById("start"), récupère l'élément dont l'attribut id hi est start.
4.var stopmove=document.getElementById("stopmove"), récupère l'élément dont la valeur de l'attribut id est stopmove.
5.mydiv.style.left=x+"px", définissez la valeur de l'attribut gauche de div.
6.start.onclick=function(){}, enregistrez la fonction de traitement d'événement onclick pour l'élément de démarrage.
7.clearInterval (drapeau), arrête la fonction de minuterie et une partie clique plusieurs fois sur le bouton de démarrage pour provoquer un effet de superposition.
8.flag=setInterval(move,20), commencez à bouger.

L'effet d'animation simple ci-dessus implémenté par javascript natif est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde soutiendra Script Home.

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：Compétences d'analyse_javascript d'instance de tableau d'objets de copie approfondie JSArticle suivant：Compétences d'analyse_javascript d'instance de tableau d'objets de copie approfondie JS

Articles Liés

Voir plus