<!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> 우리는 시각적인 정지로 인해 정적인 사진의 조합이 애니메이션의 환상을 준다는 것을 알고 있습니다. 여기에서는 이 작은 사각형을 초당 24번, 매번 5px씩 이동하여 이 환상을 사용하여 천천히 움직이는 것처럼 보이도록 합니다.
먼저 왼쪽을 통해 오프셋을 제어할 수 있도록 p1의 스타일을 설정합니다. 오프셋은 항상 증가하는 n에 의해 제어됩니다.
애니메이션을 멈춰야 하기 때문에 n>100일 때 if를 사용하여 id라는 간격을 지워 더 이상 작동하지 않도록 합니다.
관련 권장 사항:
메뉴에 민감한 마우스 슬라이딩 애니메이션을 구현하는 jQuery 메서드 effect_jquery
위 내용은 js 슬라이딩 애니메이션 효과 예제 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
