我们一般都用Marquee标签控制元素的滚动但是单向的Marquee滚动是不连续的每滚完一幕就会出现一次空白而下面介绍中的滚动则是连续的毫不间断
下面为你介绍这是如何实现的
为了滚动能够连续我们需要将字幕的内容复制多遍直到内容的高度不小于滚 动区高度的两倍然后我们将溢出的滚动条隐藏掉用代码控制滚动条向下移动(这时内容将向上移动)当滚动条滚动到最下方时理论上不能再往下滚动了于是我们立刻调整滚动条将它向上滚动到一个和当前画面一样的位置结果我们看到的就是连续的滚动了呵呵说的就是这么简单那做起来如何呢？我们看看是如何逐步实现的
＜div id=
marquees
> ＜!
这些是字幕的内容
你可以任意定义
> ＜a #
>链接一＜/a>
＜br> ＜a #>链接二＜/a>
＜br> ＜a #>链接三＜/a>
＜br> ＜a #>链接四＜/a>
＜br> ＜! 字幕内容结束 >
＜/div>
＜! 以下是javascript代码 >
＜script language=javascript>
＜!
marqueesHeight=; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
stylewidth=; //于是我们可以将它的宽度设为因为它会被撑大
styleheight=marqueesHeight;
styleoverflowY=hidden; //滚动条不可见
onmouseover=new Function(stopscroll=true); //鼠标经过停止滚动
onmouseout=new Function(stopscroll=false); //鼠标离开开始滚动
}
//这时候内容区的高度是无法读取了下面输出一个不可见的层templayer稍后将内容复制到里面
documentwrite(＜div id=templayer
>＜/div>);
function init(){ //初始化滚动内容
//多次复制原内容到templayer直到templayer的高度大于内容区高度
while(templayeroffsetHeight＜marqueesHeight){
templayerinnerHTML+=marqueesinnerHTML;
} //把templayer的内容的两倍复制回原内容区
marqueesinnerHTML=templayerinnerHTML+templayerinnerHTML;
//设置连续超时调用scrollUp()函数驱动滚动条
setInterval(scrollUp());
}
documentbodyonload=init;
preTop=; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量stopscroll为真则停止滚动
preTop=marqueesscrollTop; //记录滚动前的滚动条位置
marqueesscrollTop+=; //滚动条向下移动一个像素
//如果滚动条不动了则向上滚动到和当前画面一样的位置
//当然不仅如此同样还要向下滚动一个像素(+)
if(preTop==marqueesscrollTop){
marqueesscrollTop=templayeroffsetHeightmarqueesHeight+;
}
}
>
＜/script>
这样就完成了感觉做起来也不难吧
