난 내 개인 웹 사이트를 쓰고 있어요, 나는 (이미지 참조) 4 명 div의이 컨테이너 사업부에 포함이JQUERY - 사업부 치수를 변경에서 왼쪽 상단 왼쪽/오른쪽 또는 하단/우측
클릭하면 클릭 한 div의 크기를 컨테이너의 div 크기로 조정하려고합니다.
내가 그랬어. 위에서 아래로 오른쪽이 아래로 3 일 잘
지금 내 질문의 크기를 조정하는 방법이있다 오른쪽 아래는 왼쪽 상단합니다
HTML
CSS
JQUERY
해결책을 찾았으니 곧 게시하겠습니다.
찾고있는 애니메이션의 수준을 수행하려면 생각을 약간 변경해야합니다. 현재, 컨테이너의 너비로 인해 이미지가 서로 이어지고 줄 바꿈되는 이미지가 4 <div>으로 배치됩니다. 대신 네 모퉁이의 CSS 위치 지정을 사용하여 위치를 지정해야합니다. relative positioning을 참조하십시오.
이제 원하는 항목을 애니메이션화하려면 원하는 최종 크기와 최종 원하는 끝점 위치를 알아야합니다. 그런 다음 원하는 크기로 시작 크기와 위치에서 최종 값까지 애니메이션을 적용합니다. 크기 조정을 통해 원하는 최종 크기로 만들지 만 크기 조정 비율과 같은 비율로 이미지의 위치를 이동해야합니다. 예를 들어, 새 아이콘이 50 % 더 크면 위치는 처음부터 끝까지 50 %가되어야합니다. 이미지의 위쪽/왼쪽이 이미지가 고정 된 위치라고 생각하면 움직이는 이미지의 고정 된 모서리가 정확하게 동일한 위치에 유지되는 방식으로 각 "진드기"에서 움직여야합니다.
이 방법은 코딩 된 솔루션이 아니라는 것을 알고 있지만 스택 Exchange의 특성은 "솔루션을 코딩하십시오"보다 "질문에 답해"있습니다.
물론, 위치가 상대적으로 변경할 수있다 div의 :
예, 기본적으로 개념이지만 jquery 옵션이 있는지 묻는 중입니다./코드를 작성하는 대신 나를 도울 수있는 함수. 요리 해결책이없는 경우, 나는 내가 그렇게, 자신의 코너에 고정 유지하려고 이미지를 이동해야한다고 생각 : - 1 % 크기를 조정 - DIV 크기가 100 % – Hammond95
때까지 가 reapeted 위치 @MartinMcFlyDeLuca 불행히도 그런 구운 아웃 솔루션이나 템플릿을 모르겠습니다. 그것은 하나가 존재하지 않는다는 것을 의미하지 않으며, 단지 내가 어디서 찾을 수 있을지 모른다는 것을 의미합니다. 미안해, 내 친구. – Kolban
언제나처럼 나는 xD를 슬쩍해야만한다. – Hammond95
이 불완전 응답 THER 다른 문제가 있지만 논리적으로 문제의 해결되는 것은 후속이다.
문제는 while주기가 시간 초과되어야한다는 것입니다.
원시 자바 스크립트 메서드 SetInterval()은 순환이 끝난 후에도 계속 진행되므로이 목적에는 적합하지 않습니다.
OA가 설명한 퍼즐의 jsBin은 다음과 같습니다. http://jsbin.com/sinug/1/edit?html,css,js,output – Kolban
@Kolban 생각조차하지 않았습니다. jsBin에 대한 당신의 공헌에 감사드립니다 : D – Hammond95
당신의 논리가 state == 1 ... state = 0 - (1 + state)이면됩니다. 아마도 대신 부울을 사용하십시오. if state == true ... state =! state. 퍼즐을 보면서 대답하는 것은 아닙니다. 코드를보고있는 동안 코드에 대한 설명입니다. – Kolban