좌표 값 getBoundingClientRect의 성분 () ------ 공 애니메이션을 가져

getBoundingClientRect ()

    left, top, right 및 bottom :이 방법은 네 가지 속성을 포함하는 사각형을 반환합니다. 측면과 페이지 상단 좌측의 요소를 나타낸다.

 

VAR 상자 = document.getElementById를 ( '상자'); // 요소를 가져옵니다

// 상단에서 페이지 상단의 요소, 경고 (box.getBoundingClientRect () 상단.)

경보 (box.getBoundingClientRect () 오른쪽.) 페이지 왼쪽에서 오른쪽 // 소자

경보 (box.getBoundingClientRect () 하단.) 페이지의 맨 아래 거리 // 소자

경보 (box.getBoundingClientRect () 왼쪽.) 왼쪽 페이지 왼쪽에서 소자 // 거리

 

참고 : IE, Firefox3 +, Opera9.5, 크롬, 사파리가 IE에서 지원, 다른 브라우저보다 마지막 두 개 픽셀의 결과 (2,2)에서 측정 된 기본 좌표, 우리는 호환 할 필요가있다.

 

document.documentElement.clientTop // 비 IE는 IE 2 0

document.documentElement.clientLeft // 비 IE는 IE 2 0

functiongGetRect (요소) {

    var에 RECT = element.getBoundingClientRect ();

    VAR 위로 = document.documentElement.clientTop;

    var에 왼쪽 = document.documentElement.clientLeft;

    반환{

        상단 : rect.top - 상단

        바닥 : rect.bottom - 상단

        왼쪽 : rect.left - 왼쪽,

        오른쪽 : rect.right - 왼쪽

    }

}

각각 일치하는 모든 브라우저를 테스트하는 데 사용되는 외부 데이터, 패딩, 테두리 및 스크롤 막대와 연결된다.

 

 

 

// 공의 동적 수평 및 수직 좌표를 가져옵니다

      CONST ballPos el.getBoundingClientRect = ();

      [: 직접 일반 DOM 작업을 사용할 수 있도록, 위치의 로고 및 데이터는 여기에 바인딩 두 방법은 아무 상관이 참고] // 수평 동적 취득 및 수직 로고를 좌표

      // 장점 DOM 작업 : 상관없이 제어 할 수있는 구성 요소를 한이 요소는 문서에 속하는으로, 당신이 직접 얻을 수에 속하지 않는다

      const를 badgePos = document.getElementById를 ( "배지") getBoundingClientRect ().;

      CONST는 = badgePos.left 왼쪽 - ballPos.left을;

      const를 최고 = badgePos.top - ballPos.top;

      동적으로 상단과 왼쪽 값을 설정 //

      el.style.transform = "(+ 왼쪽 +"픽셀 "+ 상단 +"PX)를 "변환";

      트랜지션 효과 설정 펠릿 //

      // 차원 곡선 선 발생기 : http://cubic-bezier.com/#.46,-0.4,1,.49

      el.style.transition = "모든 .5s 큐빅 베 지어 (0.46, -0.4,1, 0.49)";

      // 애니메이션 입학, 당신은 수동으로 콜백 기능을 수행 호출 할 필요가있을 때, 공을 재생하는 애니메이션을 건너