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

大鸟，飞起来 · 发表于 2005-3-16 06:10:42

<

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

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

>＜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=positionabsolute;z-index1;visibilityhidden＜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
　　
这样就完成了，感觉做起来也不难吧。</P>
<

>可以看一下<a href="http://www.fei76.com" target="_blank" >www.fei76.com</A>的首页</P>

发条橙子 · 发表于 2005-3-16 06:53:06

<

>不错!</P><

>支持!</P><

>收益拉!</P>

发条橙子 · 发表于 2005-3-16 06:56:14

不过里面好象欠缺语句哦!

发条橙子 · 发表于 2005-3-16 06:56:19

不过里面好象欠缺语句哦!

大鸟，飞起来 · 发表于 2005-3-17 21:52:19

是吗？那你对照一下吧，<a href="http://www.fei76.com" target="_blank" >www.fei76.com</A> 首页就是这个

发条橙子 · 发表于 2005-3-18 02:25:28

发条橙子 · 发表于 2005-3-18 02:29:16

<

> <div id="marquees"></P><

>如果这样用的话!需要关联!</P>

大鸟，飞起来 · 发表于 2005-3-18 06:35:30

<DIV class=quote><B>以下是引用<I>发条橙子</I>在2005-3-17 18:29:16的发言：</B>

<

><div id="marquees"></P>
<

>如果这样用的话!需要关联!</P></DIV>
<

>
<

>把需要滚动的放到这里边就OK了</P>
<

>然后JS调用执行</P>

大鸟，飞起来 · 发表于 2005-3-18 06:37:58

<div id="marquees">
      <TABLE cellSpacing=0 cellPadding=0 width=178 align=center border=0>
         <TBODY>
            <TR>
            <TD height=24 bgColor=#d1e8fe class="black">　- <FONT
         color=red>关于今晚Snake讲座的公告</FONT></TD>
            </TR>
            <TR>
            <TD height=1 class="black"></TD>
            </TR>
            <TR>
            <TD height=24 bgColor=#f4faff class="black">　- 大空间，高速，稳定，安全</TD>
            </TR>
            <TR>
            <TD height=1 class="black"></TD>
            </TR>
            <TR>
            <TD height=24 bgColor=#d1e8fe class="black">　- 欢迎注册我社团会员</TD>
            </TR>
            <TR>
            <TD height=1 class="black"></TD>
            </TR>
            <TR>
            <TD height=24 bgColor=#f4faff class="black">　- 论坛诚招版主正在进行中</TD>
            </TR>
            <TR>
            <TD height=24 bgColor=#d1e8fe class="black">　- <font color="red">周六我社团要举行召新活动</font></TD>
            </TR>
            <TR>
            <TD height=1 class="black"></TD>
            </TR>
            <TR>
            <TD height=24 bgColor=#f4faff class="black">　- 免费会员诸侯制度</TD>
            </TR>
            <TR>
            <TD height=1 class="black"></TD>
            </TR>
            <TR>
            <TD height=24 bgColor=#d1e8fe class="black">　- 注册论坛会员，<span class="style1">免费送QQ</span></TD>
            </TR>
            <TR>
            <TD height=1 class="black"></TD>
            </TR>
            <TR>
            <TD height=24 bgColor=#f4faff class="black">　- 上周社团部举办社团联谊</TD>
            </TR>
            <TR>
            <TD bgColor=#aad3fc height=1></TD>
            </TR>
         </TBODY>
      </TABLE>
      </div>
      <script language="javascript">

</script>

大鸟，飞起来 · 发表于 2005-3-18 06:40:15

请把以上代码复制到记事本里，然后把扩展名改为htm,用浏览器打开就可以看到效果了

大鸟，飞起来 · 发表于 2005-8-2 05:30:50

<

>继续补一些经验：<BR>防止滚动跑出外边，通常作两个一样的表格<BR>例如<BR><table><BR> <tr><BR> <td></P>
<

><div><BR><FONT color=#c43c3c> <table><BR> <tr><BR> <td>你好，这是最里边表格！</td><BR> </tr><BR> </table></FONT></P>
<

><FONT color=#c43c3c></div></FONT><BR> </td><BR> </tr><BR></table></P>

香耐儿 · 发表于 2009-4-10 09:27:44

好贴，顶一下楼主！

古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。---魔兽剑圣异界纵横
小游戏极品家丁龙蛇演义恶魔法则飞升之后异界枪神凡人修仙传魔兽领主超级农民成人小游戏极品公子

账号		自动登录	找回密码
密码			入学