<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS animation</title>
<style>
*{ margin: 0; padding: 0; }
p{ background-color: green; width: 100px; height: 100px; }
</style></head><body><p id="p1"></p><script>
p1.style.position = 'absolute'
p1.style.left = 0
var n = 0
var id = setInterval( ()=> {
n = n + 5
p1.style.left = n + 'px'
if(n>100){
window.clearInterval(id)
}
},1000/24)</script></body></html> Wir wissen, dass uns die Kombination statischer Bilder aufgrund der visuellen Retention die Illusion einer Animation vermittelt. Hier bewege ich dieses kleine Quadrat 24 Mal pro Sekunde, jedes Mal 5 Pixel, und nutze diese Illusion, um es so aussehen zu lassen, als würde es sich langsam bewegen.
Legen Sie zunächst den Stil von p1 fest, damit wir dessen Versatz nach links steuern können. Der Offset wird durch n gesteuert, das immer größer wird.
Da die Animation gestoppt werden muss, verwenden wir die if-Beurteilung, um das Intervall mit dem Namen id zu löschen, wenn n>100, sodass es nicht mehr funktioniert.
Verwandte Empfehlungen:
jQuery-Methode zur Implementierung des menüsensitiven Mausgleitanimationseffekts_jquery
Das obige ist der detaillierte Inhalt vonTeilen eines Beispiels für einen js-Gleitanimationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
