다른 요소에 영향을 미치지 않고 개체의 크기를 동적으로 변경하십시오.

제목이 약간 혼란 스러울 수 있음을 이해합니다. (다른 질문을 할 수있는 방법을 모르겠습니다.) 여기에서 제가 수행중인 예제가 있습니다.다른 요소에 영향을 미치지 않고 개체의 크기를 동적으로 변경하십시오.

http://beautifulcreationphotography.net/gallery.html

그래서 내 문제는 이미지 위에 마우스를 할 때마다 이미지가 확대 될 때, 다른 이미지가 이동할 것입니다. 한 가지 가능한 솔루션은 절대 위치 지정을 사용하는 것입니다. 그러나 수동으로 그리드에 모든 이미지를 배치하는 번거 로움입니다 (필자는 3 열의 그리드를 그리드로 만들려고합니다).

이 문제를 해결하는 다른 해결책은 무엇입니까? 나는 JS 라이브러리를 사용하는 것뿐만 아니라 순수한 자바 스크립트 솔루션을 사용할 수있다.

HTML : http://pastebin.com/pfuRppdY

JS : http://pastebin.com/9m7TwNXU

CSS : jQuery를 같은

지금까지 자바 스크립트 프레임 워크를 사용하여 고려

#gallery { 
    display:inline; 
    margin:50px; 
    height:300px; 
} 

#gallery img { 
    position:relative; 
    width:200px; 
    margin:30px; 
}

출처

2012-06-06 Capt.Redbeard

이 사이트 확인 싶어 있습니다 줌 효과 http://codecanyon.net/item/image-effects-pack-jquery-powered/full_screen_preview/136861?ref=lvraa&ref=lvraa&clickthrough_id=60503324&redirect_back=true

스크롤 당신은 당신이 찾고있는 것을 볼 수 있습니다.

출처

2012-06-06 02:21:34 JudeJitsu

이것이 내가 찾고있는 동안 자유롭고 오픈 소스가되는 것을 선호합니다. 생각해 줘서 고마워. 또한 jQuery 라이브러리를 통해 내 상황에 맞는 무언가를 더 자세히 살펴볼 것입니다. 다른 솔루션이있는 경우 계속해서 게시하십시오. –

심플. 각 이미지에 다른 Z- 색인을 부여하십시오! 그런 식으로 그들은 다른 비행기에 모두 있습니다 ...

당신은 JavaScript/DHTML 방법으로 이것을 할 수 있습니다. 배열에 이미지의 번호를 매기면 이미지를 반복하고 각 이미지에 증가하는 z- 인덱스를 할당하는 것이 쉽습니다.

출처

2012-06-06 02:55:53 Wagtail

방금 시도했지만 작동하지 않았습니다. 위의 링크에서 페이지를 업데이트 했으므로 코드를 살펴보고 내가 잘못하지 않았는지 확인하십시오. 당신의 도움을 주셔서 감사합니다! –

테이블에 이미지를 넣는 것은 어떨까요? 각 셀에 33.3 % 너비를 부여하고 이미지의 초기 너비를 70 %로 설정하고 onmouseover를 100 %로 확장 하시겠습니까? – Wagtail

제 생각에 테이블을 사용하여 형식을 잘못 지정하는 것입니다. 나는 가장 쉬운 일을하기 위해 모든 노력을 기울이고 있습니다. 그러나 나는 그것을 유지하는 것이 더 어렵 기 때문에 테이블을 피하고 싶습니다. –

다른 요소에 영향을 미치지 않고 개체의 크기를 동적으로 변경하십시오.

답변

관련 문제