suchen

Heim >Web-Frontend >js-Tutorial >Natives Javascript ermöglicht einheitliche Bewegungsanimationseffekte. Javascript-Fähigkeiten

Natives Javascript ermöglicht einheitliche Bewegungsanimationseffekte. Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:13:111490Durchsuche

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: 

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

Rendering:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.

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：Implementierung der Schaltfläche „Zurück nach oben“ basierend auf Javascript_Javascript-KenntnissenNächster Artikel：Implementierung der Schaltfläche „Zurück nach oben“ basierend auf Javascript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen