recherche

Maison >interface Web >js tutoriel >Le javascript natif permet d'obtenir des compétences d'animation de mouvement uniformes effect_javascript

Le javascript natif permet d'obtenir des compétences d'animation de mouvement uniformes effect_javascript

WBOY
WBOYoriginal
2016-05-16 15:13:111498parcourir

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 : 

<html> 
<head> 
<meta charset="gb2312"> 
<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>

Rendu :

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation javascript.

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：Implémentation du bouton de retour en haut basé sur les compétences Javascript_javascriptArticle suivant：Implémentation du bouton de retour en haut basé sur les compétences Javascript_javascript

Articles Liés

Voir plus