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

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

WBOY

Libérer： 2016-05-16 15:07:21

original

1860 Les gens l'ont consulté

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>

Copier après la connexion

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.