Question

使用Javascript制作连续滚动字幕

Answer 1

　　我们一般都用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>　　 lishixinzhi/Article/program/Java/JSP/201311/19771