JS 모션 프레임워크의 캡슐화 과정(예제 코드

질문 하나 드리겠습니다. 출발지 A에서 목적지 B까지 걷는 데 총 1000밀리초가 걸렸습니다. 각 시간은 30밀리초입니다. 여기서 얻은 정보는 무엇입니까?

어떤 정보가 있나요?

첫 번째, 총 지속 시간은 1000밀리초입니다.

두 번째, 걷는 데 얼마나 자주 걸리나요? 30밀리초

세 번째, 총 걷기 횟수: 1000/30

네 번째, 거리: B-A

다섯 번째, 보폭: 거리/총 횟수

모션 프레임워크 구현 아이디어: 즉, 특정 시간 내에 왼쪽, 위쪽, 너비, 높이를 변경하고 목적지에 도달한 후 중지합니다.

먼저 페이지에서 div를 이동시키는 방법을 생각해 보세요.

다음과 같이 생각하세요: 1. div를 설정할 때 절대 위치가 지정됩니다. 절대 위치 지정 후에만 왼쪽, 위쪽 및 기타 값이 페이지에 표시되기 때문입니다. 그렇지 않으면 div가 페이지에 표시되지 않습니다. +                                                       함수에서 div에 대한 클릭 이벤트를 설정하고 총 걸음 수, 총 거리 dis, 속도 step=dis/count를 정의할 수도 있습니다. 또한 현재 걸음 수를 설정하고 n = 0으로 초기화해야 합니다

3. 그런 다음 타이머 setInterval()을 사용하여 div의 현재 거리를 가져오고 div가 이동하도록 합니다.

구체적인 코드는 다음과 같습니다.                                                                                                                                                     oDiv.onclick = function( ){

                              var count =parseInt(100 0/30);

//총 걸음수

                        var dis = 500-0

//

거리

                              var step = dis/count;//
var n = 0; //현재 걸음 수
                   |                                         oDiv.style.left = n*단계 + 'px';
''                 ' ‐ 30까지)     ‐‐‐‐‐‐‐‐‐ oDiv.style.left = n*step + 'px';                                               }

& lt;/script>

사실 굉장히 div를 이동시키는 방법은 간단합니다. 몇 줄의 코드만으로 div가 이동합니다.

하지만 div는 멈추지 않고 계속 움직입니다. 왜냐하면 이동 종료 조건이 설정되어 있지 않기 때문입니다. 위 코드에서는 현재 걸음 수와 총 걸음 수를 설정했는데, 현재 걸음 수와 총 걸음 수가 일치하고 타이머를 초기화하면 div가 중지될 수 있나요?

걸음수가 500에 도달하면 div는 500에서 멈춥니다.
개선된 코드는 다음과 같습니다.

window.onload = function(){

var oDiv = document.getElementById('div1');

var 타이머;

oDiv.onclick = function(){

var count = parseInt(1000/30);

//걸린 총 걸음 수

        var dis = 500-0;
//Distance

        var step = dis/count;//Speed ​​​​
              var n = 0;//현재 걸음 수
            타이머 = setInterval(function(){                                                oDiv.style.left = n*step +'px'; 사용断 判 // 판단 조건, 현재 단계 수와 전체 단계가 동일하면 div가 중지될 수 있습니다.

if (n == Count) { Clearinterval (Timer)} }, 30) }} } L & lt;/script & gt;
함수를 사용하여 이동 프로세스를 캡슐화할 수 있습니다

& lt; script type = "text/javascript" & gt; = d = D.ocument .getElementById('div1'); obj,name,target,dur){
              var count =parseInt(dur/30);                 var start = obj.offsetLeft; 페이지의 변수
       var dis = target - Start;                 n++;
                                                                              '; // 조건을 판단해 현재 단계 수와 전체 단계가 동일하면 div가 중지될 수 있습니다

(n == 횟수) {

Clearinterval (timer)

}}, 30) I}
odiv.Onclick = Function () {
Move (ODIV, 'Top', 100,1000)}}} & lt;/script &

위 내용은 JS 모션 프레임워크의 캡슐화 과정(예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!