>웹 프론트엔드 >JS 튜토리얼 >연속 텍스트 스크롤(위, 아래, 왼쪽, 오른쪽) 예제 code_javascript 기술

연속 텍스트 스크롤(위, 아래, 왼쪽, 오른쪽) 예제 code_javascript 기술

WBOY
WBOY원래의
2016-05-16 17:36:00952검색

위로

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





계속 위로 스크롤



링크 1



< ;a href="#">2개 링크



3개 링크

링크 4




< 스크립트 언어="JavaScript">

marqueesHeight=200;
stopscroll=false;

with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('

');

preTop=0; 현재Top=0;

함수 init(){
templayer.innerHTML="";
while(templayer.offsetHeight templayer.innerHTML =marquees.innerHTML;
}
윤곽. innerHTML=templayer.innerHTML templayer.innerHTML;
setInterval("scrollUp()",100);
}
document.body.onload=init;

function scrollUp(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop =1;
if(preTop==marquees.scrollTop) {
marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
marquees.scrollTop =1;
}
}




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





连续向下滚动





<스크립트 언어= "자바스크립트">

marqueesWidth=200;

with(marquees){
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preLeft=0; 현재왼쪽=0; 중지스크롤=false;

함수 init(){
templayer.innerHTML="";
while(templayer.offsetWidthtemplayer.innerHTML =marquees.innerHTML;
}
marquees. innerHTML =templayer.innerHTML;
setInterval("scrollLeft()",100);
}init();

함수 scrollLeft(){
if(stopscroll==true) return;
preLeft=marquees.scrollLeft;
marquees.scrollLeft =1;
if(preLeft==marquees.scrollLeft) {
  marquees.scrollLeft=templayer.offsetWidth-marqueesWidth 1;
}
}






向右
复主代码 代码如下:





连续向右滚动