js 슬라이딩 애니메이션 효과 예제 공유
- 小云云원래의
- 2018-03-14 17:30:272400검색
이 기사에서는 주로 js 슬라이딩 애니메이션 효과의 예를 공유합니다. 모든 사람이 js를 사용하여 간단한 슬라이딩 애니메이션 효과를 만드는 방법을 배울 수 있기를 바랍니다.
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.