知识大全使用Javascript制作连续滚动字幕

Posted 2022-07-20 内容

篇首语：知识的价值不在于占有，而在于使用。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全使用Javascript制作连续滚动字幕相关的知识，希望对你有一定的参考价值。

使用Javascript制作连续滚动字幕 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

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

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

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

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

知识大全 使用Javascript制作连续滚动字幕

知识大全使用Javascript制作连续滚动字幕