집 >웹 프론트엔드 >JS 튜토리얼 >jquery 한 줄 텍스트 위로 스크롤 효과 example_jquery

jquery 한 줄 텍스트 위로 스크롤 효과 example_jquery

WBOY원래의: 2016-05-16 16:56:341173검색

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

 
 "title" style="width:100%;height:40px;">간헐적으로 스크롤되는 텍스트를 보세요

🎜>< ;div id="top" class="infolist">

CCTV 315 노출: 차이나리소스가 '하이샤 게이트'에 깊이 관여하고 있으며 이에 대한 반응은 명확하지만 명확하지 않음
요시노야는 식기류를 살균하지 않은 혐의로 노출됐고, 보시뎅 등 캐시미어 스웨터에는 캐시미어가 들어있지 않았다.
우시 경찰은 " 임신한 여경찰의 뜻밖의 불행"

중국에서의 하루: 마지막 페리 비전: 집에서 "해내다"

코드 복사 코드 다음과 같습니다: .infolist{width:400px;matgin :0;}

.infolist ul{margin:0;padding:0;}

.infolist ul li{list -style:none;height:26px;line-height:26px;} 
.infocontent {width:400px;height:26px;overflow:hidden;border:1px solid #666666;}

코드 복사 코드는 다음과 같습니다. var 간격=1000;//사이의 시간 간격 두 개의 스크롤

var stepsize=26;//한 스크롤의 길이는 행 높이 배수여야 합니다. 그래야 스크롤할 때 줄이 끊어지지 않습니다.

var objInterval=null 

$(document). Ready( function(){ 
//아래 부분을 윗 부분으로 채웁니다
$ ("#bottom").html($("#top").html()); 

//표시된 영역에 마우스 이벤트 바인딩
$("#content").bind ("mouseover",function(){StopScroll();}) 
$("#content").bind ("mouseout",function(){StartScroll();}); 

 //타이머 시작
StartScroll() 
}); 타이머 및 스크롤 시작
function StartScroll(){ 
objInterval=setInterval("verticalloop( )",interval) 
} 

//타이머를 지우고 스크롤 중지
함수 StopScroll(){ 
window.clearInterval(objInterval); 
} 

//스크롤 제어
function Verticalloop(){ 
//상단 콘텐츠가 모두 밖으로 이동했는지 확인 표시 영역
//그렇다면 처음부터 시작하고, 그렇지 않으면 계속 위로 이동합니다.
if($( "#content").scrollTop()>=$("#top").outerHeight ()){ 
$("#content").scrollTop($("#content").scrollTop()- $("#top").outerHeight()) 
} 
/ /스크롤할 때 jquery를 사용하여 애니메이션 효과 만들기
$("#content").animate( 
{"scrollTop" : $("#content").scrollTop() stepsize "px"},600,function (){ 
//스크롤 영역의 scrollTop을 표시하는 데 사용됩니다. 실제 응용 프로그램에서는 
// $( "#foot").html("scrollTop:" $("#content를 삭제하세요. ").scrollTop()); 
}); 
} 

성명：

이전 기사：JS 디버깅을 위한 5가지 필수 디버깅 기술_javascript 기술다음 기사：JS 디버깅을 위한 5가지 필수 디버깅 기술_javascript 기술

jquery 한 줄 텍스트 위로 스크롤 효과 example_jquery

관련 기사