Comment utiliser JavaScript pour obtenir l'effet de défilement continu subtitles

Comment utiliser JavaScript pour obtenir l'effet de défilement continu subtitles_javascript skills

WBOY

Libérer： 2016-05-16 15:51:12

original

1325 Les gens l'ont consulté

Nous utilisons généralement la balise Marquee pour contrôler le défilement des éléments. Cependant, le défilement unidirectionnel du Marquee est discontinu. Chaque fois qu'une scène défile, un espace apparaît. Le défilement dans l’introduction ci-dessous est continu sans interruption.

Voici une introduction à la façon dont cela est réalisé.

Pour que le défilement soit "continu", nous devons copier le contenu des sous-titres plusieurs fois jusqu'à ce que la hauteur du contenu ne soit pas inférieure à deux fois la hauteur de la zone de défilement. Ensuite, nous masquons la barre de défilement débordante et utilisons du code pour contrôler la barre de défilement afin qu'elle se déplace vers le bas (à ce moment, le contenu se déplacera vers le haut). Lorsque la barre de défilement défile vers le bas, elle ne peut théoriquement pas défiler plus loin, nous ajustons donc immédiatement la barre de défilement et la faisons défiler jusqu'à la même position que l'écran actuel. En conséquence, ce que nous voyons est un défilement continu. Haha, c'est aussi simple que ça. Voyons comment cela est réalisé étape par étape.

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

Copier après la connexion

C’est tout. Cela ne semble pas difficile à faire.