jquery 기반 콘텐츠 사이클 스크롤 소형 모듈(Sina Weibo 미기록 홈페이지 스크롤 Weibo 디스플레이 모방)_jquery
- WBOY원래의
- 2016-05-16 18:09:031051검색
요구사항 측면에서 이 기능은 최신 Weibo 데이터를 실시간으로 호출해야 합니다. 프런트엔드 개발에 관한 한 요구사항은 다음과 같이 나눌 수 있습니다.
1 콘텐츠가 계속 스크롤됩니다.
2 새로운 Weibo에는 다음 Weibo가 포함됩니다. 먼저 아래로 누른 다음 페이드 인합니다.
3 마우스가 콘텐츠 위로 지나갈 때 스크롤을 일시 중지합니다.
4 컨테이너 하단의 그라데이션이 배경색 아래로 사라집니다.
위 4가지 요구사항 중 요구사항 1~3은 js 기술로 구현되었으며, 요구사항 4는 CSS 기술로 구현되었습니다.
요구 사항 1 및 2: 콘텐츠의 지속적인 스크롤에 대한 요구 사항은 이전 기사 "소형 모듈: 알림 스크롤 및 일시 중지"에서 소개된 기능과 다소 유사합니다. 해당 기사에서 이 기능은 CSS 위치 지정을 사용하여 전체 이동을 제어합니다. ul 목록의 애니메이션. 요구 사항 2와 결합하여 더 간단한 것을 작성할 수 있습니다. 첫 번째 li 요소 위에 마지막 li 요소를 정기적으로 삽입한 다음 애니메이션 방법을 사용하여 li의 높이와 투명도를 변경할 수 있습니다. 그러나 일시정지 없이 스크롤하려면 여전히 setTimeout 메소드가 필요합니다. 새 데이터가 로드되지 않은 경우 제한된 콘텐츠 루프 스크롤을 달성합니다.
요구 사항 3: 마우스를 가져갈 때 일시 중지하는 요구 사항은 마우스를 가져갈 때 특정 속성의 값을 요소에 추가할 수 있습니다. 여기서는 이 값이 존재하는지 여부를 확인하는 데 사용됩니다. 코드가 실행되지 않습니다.
요구 사항 4: 이는 콘텐츠에 그라데이션 png24 이미지를 오버레이하여 달성할 수 있습니다. IE6은 png24를 잘 지원하지 않습니다. 성능을 고려해야 하는 경우 IE6의 디스플레이:없음 해킹을 이 컨테이너에 추가하세요. 다음 문제는 이미지가 텍스트를 덮는 문제와 텍스트를 클릭하거나 선택할 수 있는 방법을 해결하는 것입니다. 이때 이 속성의 값을 none으로 설정한 후에는 특수 CSS 속성인 "pointer-events"가 필요합니다. , 마우스가 통과할 수 있습니다. 텍스트 위에 절대적으로 위치한 이미지는 그 아래의 텍스트를 선택합니다.
전체 코드는 다음과 같습니다.
HTML
< ;div class="messagewrap">
CSS
li{ height:50px;}
.bottomcover{width:500px ;height:45px;position:absolute;bottom:0;left:0;
pointer-events:none; background:url(halftransp.png) 왼쪽 하단 no-repeat;
/*배경색 그라데이션 투명 이미지에서 누군가 올라옴*/ _display:none;/*IE6 환경을 위해 다운그레이드됨*/}