jQuery 사진 크기 조정 효과는 다른 요소의 레이아웃에 영향을 주지 않습니다_jquery

이런 특수 효과는 예전에 인터넷에서 본 적이 있는데 아쉽게도 당시 URL을 저장하지 않아서 이런 특수 효과가 어떻게 나오는지 몰랐습니다. 오늘 일부러 인터넷을 검색했는데, 우연히 발견하게 되었습니다.

저도 열심히 노력해서 쓰려고 노력했습니다.

하지만 단순히 이미지를 확대한 것일 뿐이고, 이미지 주변 요소의 레이아웃에도 영향을 미쳤습니다(확대 때문입니다). 이미지가 더 많은 공간을 차지합니다.)

나중에 오버플로 및 위치 속성을 유연하고 능숙하게 사용하면 목적을 달성할 수 있다는 것을 알게 되었습니다. 사실 CSS(CSS3)의 오버플로와 위치(부수적으로 위쪽, 아래쪽, 왼쪽, 오른쪽)는 단순히 웹 페이지 특수 효과에 대한 해결 불가능한 조합이라고 생각합니다. 물론 js(jquery)가 대세입니다.

그렇게 말도 안 되는 소리를 하고 나면 모두가 여전히 혼란스러울 것입니다. 이게 무슨 특수효과인가요? 아아, 내 언어 표현 능력은 아직 매우 평범합니다. 아래에 스크린샷을 찍어 보겠습니다.

웹 페이지를 열었을 때의 초기 모습입니다.

6 위에 마우스를 올리면 사진 중 하나를 클릭하면 제가 언급한 특수 효과가 나타납니다(여기서는 예를 들어 세 번째 사진에 마우스를 올려 놓았습니다).

사진이 축소되고, 마우스를 놓았을 때 사진을 열면 사진이 넘치는 현상 없이 다시 확대된(초기상태로 돌아간) 느낌이 들며, 다른 레이아웃에 영향을 주지 않습니다. 사진과 요소.

코드는 아래와 같습니다.