使用Javascript制作连续滚动字幕 |
|
我们普通都用Marquee标签操纵元素的滚动 。然而单向的Marquee滚动是不延续的，每滚完一幕，就会浮现一次空白 。而下面介绍中的滚动则是延续的，毫不间断 。
下面小阳为你介绍这是如何实现的 。
为了滚动 可以“延续”，我们需求将字幕的内容复制多遍，直到内容的高度不小于滚动区高度的两倍 。 而后我们将溢出的滚动条 潜藏掉，用代码操纵滚动条向下移动(这时内容将向上移动) 。当滚动条滚动到最下方时， 实际上不能再往下滚动了，于是我们 立即调整滚动条，将它向上滚动到一个和目前画面一样的位置 。 后果我们看到的便是延续的滚动了 。呵呵，说的便是这么 方便，那做起来如何呢？我们看看是如何逐渐实现的 。 ＜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> 这样就 实现了，觉得做起来也不难吧 。 |
