javascript 또 다른 이미지 스크롤 전환 효과 idea_javascript 기술

먼저 가장 일반적인 아이디어에 대해 이야기해 보겠습니다.

사진을 ul 등으로 감싸고 float를 설정합니다. 그런 다음 ul 자체가 절대값으로 위치하도록 설정하고 상위 태그가 상대값으로 위치하도록 설정합니다. ul의 왼쪽 또는 위쪽 값을 설정하면 그림 대기열의 스크롤 효과가 달성됩니다.

특징:

시스템 오버헤드가 낮은 하나의 html 요소(예: 위의 ul)만 작동합니다. ; 끝으로 스크롤하면 롤백됩니다. 큰 시퀀스 번호에서 작은 시퀀스 번호로 스크롤하면 "휙" 소리와 함께 중간에 있는 모든 그림이 롤백됩니다. .

또 다른 아이디어는 제가 XScroll.js에서 구현한 아이디어입니다. 모든 그림은 절대 위치 지정을 사용합니다. 자세한 내용은 해당 기사를 참조하세요.

XScroll.js가 완성된 후 항상 시스템 소모가 문제라고 느꼈습니다. 기본적으로 이미지 전환을 구현하기 위해 두 개의 이미지를 동시에 동작시키기 때문이죠. 그래서 간소화된 버전을 작성하고 싶었지만 기사 시작 부분에서 언급한 가장 일반적인 버전은 원하지 않았습니다.

나중에 우연히 투도 여성채널에서 그림 스크롤 전환을 구현하는 또 다른 아이디어를 발견했습니다.

그의 특징은

어떤 일련번호에서 어떤 일련번호로 점프해도 한 단계만 스크롤됩니다. 예를 들어 1에서 2로 점프하거나 1에서 3으로 점프하면 한 단계만 스크롤됩니다. 중간에 다른 그림이 있어도 당연히 나타나지 않고 끝에 도달하면 롤백되지만 롤백은 한 단계뿐입니다.

이 효과는 놀라워 보입니다. 그의 HTML을 연구한 결과 구현이 XScroll.js보다 훨씬 간단하다는 것을 알았습니다.

코드 복사 코드는 다음과 같습니다.

• 


• /a>


• /a>


• a>

html 구조, 이전 위치는 가장 일반적인 아이디어와 동일하며 모든 이미지는 다음과 같이 설정됩니다. 플로트:왼쪽 . 그런데 JS에는 이상한 점이 있습니다. 현재 사진만 표시되도록 설정하고 다른 사진은 숨기면 스크롤하면 다음 사진이 표시되고 다음 사진이 현재 사진 앞에 있는지 뒤에 있는지 판단됩니다. : 현재 사진 뒤에서 왼쪽으로 스크롤합니다. 앞으로 롤백하세요.

모든 사진은 플로팅으로 설정되어 있으므로 두 장의 사진이 표시되면 플로트 때문에 서로 밀접하게 연결됩니다. 이렇게 하면 사진 위치에 대해 걱정할 필요가 없습니다.

게다가 이 방법을 사용하면 단일 이미지를 작동하는 대신 이미지 컨테이너(예: ul)만 작동하면 되므로 시스템 리소스가 절약됩니다.

이 아이디어가 훌륭하고 간단하며 경제적이라고 생각하여 이 효과를 기록하기 위해 XScroll2.js를 작성했습니다.

관심 있는 친구들은 Paipai.com 홈페이지의 이미지 전환을 모방한 XScroll2.js 샘플 페이지를 살펴보세요. 그 효과도 위에서 언급한 것과 동일하기 때문입니다. 하지만 기사가 끝날 때까지 얼마나 많은 학생들이 버틸 수 있을지 모르겠습니다. . .