So erzielen Sie mit JavaScript den Effekt des kontinuierlichen Scrollens: subtitles_javascript-Fähigkeiten

Im Allgemeinen verwenden wir das Marquee-Tag, um das Scrollen von Elementen zu steuern. Das einseitige Scrollen im Marquee ist jedoch diskontinuierlich. Jedes Mal, wenn eine Szene gescrollt wird, wird ein Leerzeichen angezeigt. Das Scrollen in der Einleitung unten erfolgt kontinuierlich und ohne Unterbrechung.

Hier finden Sie eine Einführung, wie dies erreicht wird.

Damit das Scrollen „kontinuierlich“ ist, müssen wir den Inhalt der Untertitel mehrmals kopieren, bis die Höhe des Inhalts nicht weniger als das Doppelte der Höhe des Scrollbereichs beträgt. Dann blenden wir die überlaufende Bildlaufleiste aus und verwenden Code, um die Bildlaufleiste so zu steuern, dass sie sich nach unten bewegt (zu diesem Zeitpunkt bewegt sich der Inhalt nach oben). Wenn die Bildlaufleiste nach unten scrollt, kann sie theoretisch nicht weiter scrollen, daher passen wir die Bildlaufleiste sofort an und scrollen sie nach oben an die gleiche Position wie der aktuelle Bildschirm. Als Ergebnis sehen wir ein kontinuierliches Scrollen. Haha, so einfach ist das. Wie wäre es damit? Schauen wir uns an, wie das Schritt für Schritt gelingt.

＜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>

　

Das ist es. Es fühlt sich nicht schwierig an.