教你用Javascript制作连续滚动的字幕

S奔腾婚车队

S奔腾婚车队

2016-01-29 12:40

教你用Javascript制作连续滚动的字幕,教你用Javascript制作连续滚动的字幕
我们一般都用Marquee标签控制元素的滚动。但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白。而下面介绍中的滚动则是连续的,毫不间断。

  下面小阳为你介绍这是如何实现的。

  为了滚动能够“连续”,我们需要将字幕的内容复制多遍,直到内容的高度不小于滚
动区高度的两倍。然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动)。当滚动条滚动到最下方时,理论上不能再往下滚动了,于是我们立刻调整滚动条,将它向上滚动到一个和当前画面一样的位置。结果我们看到的就是连续的滚动了。呵呵,说的就是这么简单,那做起来如何呢?我们看看是如何逐步实现的。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/java/)

<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
  
这样就完成了,感觉做起来也不难吧。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/java/)
展开更多 50%)
分享

猜你喜欢

教你用Javascript制作连续滚动的字幕

Java JAVA基础
教你用Javascript制作连续滚动的字幕

用javascript代替marquee的滚动字幕效果代码

Web开发
用javascript代替marquee的滚动字幕效果代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

怎样用dreamweaver制作滚动字幕

Web开发
怎样用dreamweaver制作滚动字幕

连续滚动的制作

电脑网络
连续滚动的制作

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用JavaScript制作活动字幕

Web开发
用JavaScript制作活动字幕

如何用dreamweaver制作滚动字幕

Web开发
如何用dreamweaver制作滚动字幕

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JSP由浅入深(8)

JSP由浅入深(8)

《放开那三国》武将搭配全攻略

《放开那三国》武将搭配全攻略
下拉加载更多内容 ↓