JavaScript를 사용하여 연속 스크롤 효과를 얻는 방법 subtitles_javascript 기술

우리는 일반적으로 Marquee 태그를 사용하여 요소의 스크롤을 제어합니다. 그러나 단방향 선택 윤곽 스크롤은 장면이 스크롤될 때마다 공백이 나타납니다. 아래 소개 부분의 스크롤은 중단 없이 계속됩니다.

이를 달성하는 방법에 대한 소개는 다음과 같습니다.

스크롤이 "연속"되려면 콘텐츠 높이가 스크롤 영역 높이의 2배 이상이 될 때까지 자막 콘텐츠를 여러 번 복사해야 합니다. 그런 다음 넘쳐나는 스크롤 막대를 숨기고 코드를 사용하여 스크롤 막대가 아래로 이동하도록 제어합니다(이때 콘텐츠는 위로 이동합니다). 스크롤 바가 아래쪽으로 스크롤되면 이론적으로 더 이상 스크롤할 수 없으므로 즉시 스크롤 바를 조정하여 현재 화면과 동일한 위치까지 위로 스크롤합니다. 결과적으로 우리가 보는 것은 지속적인 스크롤입니다. 하하, 그렇게 간단해서 어때요? 이것이 어떻게 단계별로 달성되는지 살펴보겠습니다.

＜div id="marquees"> ＜!-- 这些是字幕的内容，你可以任意定义 --> ＜a href="#">链接一＜/a>
＜br> ＜a href="#">链接二＜/a>
＜br> ＜a href="#">链接三＜/a>
＜br> ＜a href="#">链接四＜/a>
＜br> ＜!-- 字幕内容结束 -->
＜/div>
＜!-- 以下是java-script代码 -->
＜script language="java-script">
＜!--
marqueesHeight=200; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0，因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"); //鼠标经过，停止滚动
onmouseout=new Function("stopscroll=false"); //鼠标离开，开始滚动
}
//这时候，内容区的高度是无法读取了。下面输出一个不可见的层"templayer"，稍后将内容复制到里面：
document.write('＜div id="templayer"
style="position:absolute;z-index:1;visibility:hidden">＜/div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer"，直到"templayer"的高度大于内容区高度：
while(templayer.offsetHeight＜marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区：
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时，调用"scrollUp()"函数驱动滚动条：
setInterval("scrollUp()",10);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真，则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了，则向上滚动到和当前画面一样的位置
//当然不仅如此，同样还要向下滚动一个像素(+1)：
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
＜/script>

　

그렇게 하면 어렵지 않아요.