jquery 기반 콘텐츠 사이클 스크롤 소형 모듈(Sina Weibo 미기록 홈페이지 스크롤 Weibo 디스플레이 모방)_jquery
풀어 주다： 2016-05-16 18:09:03
요구사항 측면에서 이 기능은 최신 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
.messagewrap{overflow:hidden;position:relative;width:500px;height:300px}
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 환경을 위해 다운그레이드됨*/}
JS
<script> <br>$(function(){ <br>msgmove(); <br>$("ul").hover(function( ){ <br>$(this).attr("name","hovered"); //마우스가 설정된 후 이름 ul 값이 "hovered"입니다. <br>}, function(){ <br>$(this) .removeAttr("name") <br>}) <br>function msgmove() { <br>var isIE=!!window.ActiveXObject; <br>var isIE6=isIE&&!window.XMLHttpRequest; <br>if($("ul").attr("name") != "hovered") <br>//ul의 name 속성이 "hovered"인지 확인하고 다음 코드 블록이 실행되는지 여부를 결정합니다. 마우스가 그 위로 지나갈 때 스크롤을 일시 중지합니다. <br>var height = $("li:last").height(); <br>if(isIE6){ <br>//IE6 판단, 중국어 고스팅을 함께 사용하면 jQuery의 애니메이션 애니메이션과 불투명도 투명도가 IE6에 나타납니다. 현상, <br>//ie6에서는 투명하게 비활성화됩니다. <br>$("li:last").css({"height":0}); <br>}else{ <br>$("li:last").css({"opacity":0, "height":0}); <br>//목록의 마지막 li는 투명하고 높이는 0으로 설정됩니다. <br>} <br>$("li:first").before($("li :last")) ; <br>//제한된 목록 항목의 무한 루프 스크롤 표시를 달성하려면 목록의 마지막 li를 맨 위로 승격하세요. <br>$("li:first").animate({"height": height},300); <br>//아래의 li를 아래로 밀면서 목록 상단의 li 높이가 점차 높아집니다. <br>if(!isIE6){ <br>$("li:first" ).animate({"opacity":"1"} ,300); <br>//IE6 이외의 브라우저에서 투명 페이드인 효과 설정<br>} <br>} <br>setTimeout("msgmove() ",5000); <br>//1회 스크롤을 5초로 설정<br>} <br></script>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
