suchen

Heim  >  Artikel  >  Web-Frontend  >  Ein einfacher Animationseffekt, der in nativen Javascript_Javascript-Fähigkeiten implementiert ist

Ein einfacher Animationseffekt, der in nativen Javascript_Javascript-Fähigkeiten implementiert ist

WBOY
WBOYOriginal
2016-05-16 15:07:211911Durchsuche

Dieser Artikel stellt Ihnen eine in Javascript implementierte Animation vor. Wenn Sie auf die Schaltfläche „Start“ klicken, bewegt sich das Div nach rechts. Wenn Sie auf „Stopp“ klicken, wird die Bewegung des Divs gestoppt. Wenn Sie erneut klicken, bewegt es sich weiter. Bitte sehen Sie sich den Code unten an. 

<!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>

Code-Erklärung:


1.window.onload=function(){}: Wenn der Dokumentinhalt vollständig geladen ist, führen Sie den Code in der Funktion aus.
2.var mydiv=document.getElementById("mydiv"), ruft das Element ab, dessen ID-Attributwert mydiv ist.
3.var start=document.getElementById("start"), ruft das Element ab, dessen ID-Attribut hi start ist.
4.var stopmove=document.getElementById("stopmove"), ruft das Element ab, dessen ID-Attributwert stopmove ist.
5.mydiv.style.left=x+"px", legen Sie den linken Attributwert von div fest.
6.start.onclick=function(){}, registrieren Sie die Onclick-Ereignisverarbeitungsfunktion für das Startelement.
7.clearInterval(flag), stoppt die Timer-Funktion und eine Partei klickt mehrmals auf die Startschaltfläche, um einen Overlay-Effekt zu verursachen.
8.flag=setInterval(move,20), beginne mit der Bewegung.

Der obige einfache Animationseffekt, der durch natives Javascript implementiert wird, ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass jeder Script Home unterstützt.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS-Deep-Copy-Object-Array-Instanzanalyse_Javascript-KenntnisseNächster Artikel：JS-Deep-Copy-Object-Array-Instanzanalyse_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen