>웹 프론트엔드 >JS 튜토리얼 >jQuery 모방 Sina 그래픽 및 텍스트 페이드 인 및 주요 브라우저의 간헐적 스크롤 효과와 완벽하게 호환_jquery

jQuery 모방 Sina 그래픽 및 텍스트 페이드 인 및 주요 브라우저의 간헐적 스크롤 효과와 완벽하게 호환_jquery

WBOY
WBOY원래의
2016-05-16 16:31:331376검색

1. 시나 웨이보 사진 텍스트 목록이 페이드 인/아웃되고 간헐적으로 스크롤됩니다

2. 구현 원리는 먼저 4개의 사진만 표시하도록 div를 설정한 다음 위아래로 스크롤할 수 있도록 사진에 애니메이션 이벤트를 추가하는 것입니다. 효과는 li 태그에 의해 재생됩니다. 내부의 콘텐츠, 그림 및 텍스트는 각 li를 전체적으로 처리하며, 스크롤하면 div에 들어가고 표시됩니다. 전체에 대한 시간을 설정합니다. 애니메이션 효과가 완전히 실행됩니다.

3. 운영환경

Firefox, Google Chrome 브라우저의 IE6 IE7 IE8 이상에서 구현 가능합니다

4. 모든 사진의 압축 패키지에 대한 새 파일을 만든 다음 패키지의 압축을 풀고 폴더에 넣습니다. 다운로드 후 사진의 압축 패키지를 확인하고 다운로드할 수 있습니다. 폴더 이름은 이미 작성되어 있고 html5 내의 경로가

과 일치하므로 수정할 필요가 없습니다.

5. 생성된 html 파일을 저장할 때 일부 한자가 정상적으로 표시되도록 인코딩 형식을 (UTF-8)로 변경합니다. (T)를 (모든 파일(*.*)로 변경합니다. ), html5와 압축 해제된 이미지 폴더를 같은 폴더에 넣습니다

6. 코드

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