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.
