javascript - 이미지 표시 스크롤 문제

Question

예를 들어 사진, 스크린샷의 일부, 사진이 25개라면 이러한 사진은 모두 하나의 ul에 포함됩니다. 초기 화면에는 10개의 사진이 표시됩니다. 더보기 버튼을 클릭하면 10개의 사진이 모두 위로 스크롤되어 숨겨집니다. 아래에서 아래로 스크롤하면 10장의 사진이 있습니다. 한 번에 10장의 사진만 표시할 수 있습니다. 다시 클릭하면 5장의 사진이 표시됩니다. 마지막으로 클릭하면 초기 상태로 돌아갑니다. 이 효과를 얻는 방법은 무엇입니까? 모두에게 설명해 주세요. 전혀 모르겠어

Answer 1

먼저 상위 컨테이너 위치를 제어합니다:relative,top:0,left:0,transition:all .5

첫 번째 클릭사진 10장의 높이 빼기

두 번째 클릭사진 20장의 높이를 뺀

......

다른 것도 마찬가지

마지막 시간: top:0

Answer 2

사진 4장짜리 회전목마 같은 건가요? 원칙

Answer 3

정답은 위층입니다. 일반적으로 캐러셀은 이 아이디어를 따릅니다. 먼저 부모는 숨길 수 없을 정도입니다. 그런 다음 높이를 계속 조정하면 괜찮을 것입니다

Answer 4

정답은 위층에 있습니다. 또한 CSS의 애니메이션 효과도 좋습니다. 더 나은 경험을 위해 js jq 애니메이션을 사용하는 것도 좋습니다.