js 텍스트 스크롤 effect_javascript 기술에 대한 간략한 분석

height:25px; line-height:25px;
border:#bbb 1px solid;
overflow:hidden;
}
.box ul{margin:0}
.box li{
높이:25px;
글꼴 크기:12px;
목록 스타일 유형:없음



3.js

index: 캡슐화된 함수는 페이지의 다양한 요소에 적용될 수 있습니다. 🎜>var p=false;
var o=document.getElementById("marqueebox" index);
//문서의 스크롤 영역 개체를 가져와서 변수 o에 할당합니다. o.innerHTML; //객체의 실제 내용은 두 개의 ul을 포함하는 복사본입니다. 물론 li 태그도 3줄에서 6줄로 변경되었습니다. 복사의 목적은 텍스트에 대한 전환을 제공하는 것입니다. 중단 없이 위쪽으로 스크롤합니다.
o.onmouseover=function(){p=true}
//마우스가 미끄러져 스크롤을 멈춥니다.
o.onmouseout=function(){p=false}
//마우스 스크롤 시작; p가 true인지 false인지는 아래 start() 함수 실행에 직접적인 영향을 미칩니다.
o.scrollTop = 0
//텍스트 콘텐츠 상단 사이의 거리; 스크롤 영역의 경우 초기 값은 0입니다.
function start(){
t=setInterval(scrolling,speed); //가끔 setInterval은 더 큰 스크롤 기능을 실행합니다.
if(!p){ o.scrollTop = 1;}
//전달된 부울 값에 따라 스크롤이 중지되거나 시작됩니다. p;
}
function scrolling(){
if(o.scrollTop%lh!=0){
//나누기가 불가능한 경우, 즉 한 번의 위로 이동하는 높이는 lh에 도달하지 않으면 콘텐츠가 계속 위로 스크롤됩니다.
o.scrollTop = 1
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0; 객체 o에서 이전에 한 번 복사되었으므로 스크롤 높이가 실제로는 원래 내용입니다. 이중 높이
내용이 scrollHeight/2 높이까지 스크롤되면 텍스트 세 줄이 모두 한 번 표시되고 전체 내용이 표시됩니다. content
scrollTop은 0으로 반환됩니다. 다음 스크롤이 텍스트에 도달할 때까지 기다립니다. 지속적인 위쪽 스크롤의 효과
}else{
clearInterval(t)>//그렇지 않으면 t 및 스크롤 일시 중지
setTimeout(start,delay);
//지연 간격 이후 start()를 시작하고 스크롤을 계속합니다.
}
}
setTimeout(start,delay); >//처음으로 스크롤을 시작합니다. setTimeout은 일정 시간이 지나면 start() 함수를 실행하며 한 번만 실행됩니다.
}
//매개변수 전달
startmarquee(25,30,3000 ,0);//일시 중지 효과 사용
startmarquee(25,40,0,1 )
//계속


다음은 모두 코드입니다.