순환 원형 이미지

Question

하나의 큰 중앙 원형 이미지를 중심으로 회전하는 5 개의 원형 이미지를 만들려고합니다.

커서가 이미지 위에 올리면 회전을 중지하고 모든 이미지를 다른 페이지에 연결할 수있게하고 싶습니다.

나는 여기에 외부 이미지를 가지고 :

이

http://codepen.io/chipower/pen/mysdh

사람이 일어날 수 있도록하는 방법을 알고 있나요?

Answer 1

애니메이션에 setInterval을 사용하십시오. 이것은 n 밀리 초마다 동일한 함수를 호출합니다. 마우스 마우스 오버 (jQuery.hover는) 다음 함수 setInterval을이 항목의 각도가 증가 레이아웃 다시 그려해야합니다 있는지 확인하기 위해 호출하는 플래그를 설정

.

플래그가 명확 증가를 각도이며 원에 표시 할 CSS 항목의 왼쪽 새로운 최상위을, 플롯 경우

. X는 Y가 요구되어 상부

x = r * Math.cos(deg2Rad(a)) + cx; 
    y = r * Math.sin(deg2Rad(a)) + cy; 

는, R은 CX에서 반경 원의 사이클 센터, CSS는이 각도 특성 떠났다.

deg2Rad (a)는 당신이 지금 가지고있는 단지 올바른 URL로 "#"을 업데이트 단지 표준 HTML 인 이미지 링크 가능한을 만드는 방법에 대한

function deg2Rad(deg){ 
    return deg*Math.PI/180; 
} 

귀하의 마지막 포인트를 라디안으로 변환