jquery 기반 콘 텐 츠 순환 스크롤 모듈(시 나 웨 이 보 로그 인 하지 않 은 홈 페이지 스크롤 웨 이 보 디 스 플레이 참조)

수요 측면 에서 볼 때 이 기능 은 최신 웨 이 보 데 이 터 를 실시 간 으로 호출 해 야 한다.전단 개발 에 있어 그 수 요 는 다음 과 같다.1 내용 이 지속 적 으로 굴 러 가 는 것 이다.2.뉴 웨 이 보 는 아래 의 웨 이 보 를 먼저 밀어 내 고 담 입 한다.3 마우스 가 내용 을 통 해 스크롤 을 일시 정지 합 니 다.4.용기 밑부분 이 배경 색 에서 점점 사라 집 니 다.상기 4 가지 수요 중에서 수 요 는 1-3 은 js 기술 의 실현 이 고 수 요 는 4 는 css 기술 의 실현 이 며 다음 과 같은 수 요 를 말한다.수요 1 과 수요 2:내용 이 지속 적 으로 굴 러 가 는 수 요 는 이전 글 인 에서 소개 한 기능 과 유사 합 니 다.그 글 에서 이 기능 은 css 의 position 포 지 셔 닝 을 사용 하여 전체 얼 목록 의 이동 애니메이션 을 제어 합 니 다.수요 2 를 결합 하면 우 리 는 좀 더 간단하게 쓸 수 있다.마지막 li 요 소 를 정시 에 첫 번 째 li 요소 의 위 에 삽입 한 다음 에 animate 방법 으로 li 의 높이 와 투명 효 과 를 바 꿀 수 있다.멈 추 지 않 는 스크롤 은 setTimeout 방법 을 사용 해 야 합 니 다.새로운 데이터 가 불 러 오지 않 은 상태 에서 제 한 된 내용 순환 스크롤 을 실현 해 야 합 니 다.수요 3:마우스 가 일시 정 지 된 수 요 는 마우스 hover 가 지나 갈 때 특정한 요소 에 특정한 속성의 값 을 추가 할 수 있 습 니 다.여 기 는 name 속성―이 값 이 존재 하 는 지 여 부 를 판단 하고 존재 하면 코드 를 실행 하지 않 습 니 다.필요 4:내용 에 그 라 데 이 션 된 png 24 그림 을 덮어 쓸 수 있 습 니 다.IE6 는 png 24 에 대한 지원 이 좋 지 않 습 니 다.성능 을 고려 해 야 한다 면 이 용기 에 display:none 의 IE6hack 를 추가 합 니 다.다음 문 제 는 그림 을 텍스트 위 에 덮어 쓰 는 것 입 니 다.문 자 를 클릭 하거나 선택 할 수 있 는 문 제 를 해결 하 는 것 입 니 다.이 때 는 특수 한 css 속성 인'pointer-events'가 필요 합 니 다.이 속성의 값 을 none 으로 설정 하면 마 우 스 는 텍스트 에 있 는 그림 을 통 해 아래 의 문 자 를 선택 할 수 있 습 니 다.종합 코드 는 다음 과 같다.HTML

 
<div class="messagewrap"> 
<ul> 
<li><!--  li，             --></li> 
</ul> 
<div class="bottomcover"> 
<!--    w3c           ，        &nbsp;--> 
</div> 
</div> 

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) left bottom no-repeat; 
/*             */ _display:none;/*  IE6    */} 

JS

 
<script> 
$(function(){ 
msgmove(); 
$("ul").hover(function(){ 
$(this).attr("name","hovered"); //      ul name  "hovered" 
},function(){ 
$(this).removeAttr("name"); 
}); 
}); 
function msgmove(){ 
var isIE=!!window.ActiveXObject; 
var isIE6=isIE&&!window.XMLHttpRequest; 
if($("ul").attr("name") != "hovered"){ 
//  ul name     "hovered"，           ，           。 
var height = $("li:last").height(); 
if(isIE6){ 
//  IE6，jQuery animate   opacity        IE6          ， 
//   ie6        。 
$("li:last").css({"height":0}); 
}else{ 
$("li:last").css({"opacity":0,"height":0}); 
//     li        0 
} 
$("li:first").before($("li:last")); 
//      li     ，                
$("li:first").animate({"height":height},300); 
//     li           li    
if(!isIE6){ 
$("li:first").animate({"opacity":"1"},300); 
//  IE6             
} 
} 
setTimeout("msgmove()",5000); 
//  5      
} 
</script>