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

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

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

＜div id="marquees"> ＜!-- 这些是字幕的内容，你可以任意定义 --> ＜a href="#">链接一＜/a>
＜br> ＜a href="#">链接二＜/a>
＜br> ＜a href="#">链接三＜/a>
＜br> ＜a href="#">链接四＜/a>
＜br> ＜!-- 字幕内容结束 -->
＜/div>
＜!-- 以下是java-&#115cript代码 -->
＜&#115cript language="java-&#115cript"&gt;<br>＜!--<br>marqueesHeight=200; //内容区高度<br>stopscroll=false; //这个变量控制是否停止滚动<br>with(marquees)&#123;<br>noWrap=true; //这句表内容区不自动换行<br>style.width=0; //于是我们可以将它的宽度设为0，因为它会被撑大<br>style.height=marqueesHeight;<br>style.overflowY="hidden"; //滚动条不可见<br>onmouseover=new Function("stopscroll=true"); //鼠标经过，停止滚动<br>onmouseout=new Function("stopscroll=false"); //鼠标离开，开始滚动<br>&#125;<br>//这时候，内容区的高度是无法读取了。下面输出一个不可见的层"templayer"，稍后将内容复制到里面：<br>document.write('＜div id="templayer"<br>style="position:absolute;z-index:1;visibility:hidden"&gt;＜/div&gt;');<br>function init()&#123; //初始化滚动内容<br>//多次复制原内容到"templayer"，直到"templayer"的高度大于内容区高度：<br>while(templayer.offsetHeight＜marqueesHeight)&#123;<br>templayer.innerHTML+=marquees.innerHTML;<br>&#125; //把"templayer"的内容的“两倍”复制回原内容区：<br>marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;<br>//设置连续超时，调用"scrollUp()"函数驱动滚动条：<br>setInterval("scrollUp()",10);<br>&#125;<br>document.body.onload=init;<br>preTop=0; //这个变量用于判断滚动条是否已经到了尽头<br>function scrollUp()&#123; //滚动条的驱动函数<br>if(stopscroll==true) return; //如果变量"stopscroll"为真，则停止滚动 <br>preTop=marquees.scrollTop; //记录滚动前的滚动条位置<br>marquees.scrollTop+=1; //滚动条向下移动一个像素<br>//如果滚动条不动了，则向上滚动到和当前画面一样的位置<br>//当然不仅如此，同样还要向下滚动一个像素(+1)：<br>if(preTop==marquees.scrollTop)&#123;<br>marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;<br>&#125;<br>&#125;<br>--&gt;<br>＜/&#115cript&gt;<br>　　<br>这样就完成了，感觉做起来也不难吧。</P></font></div> <div></div> </div><div id="Message" class="Message"></div></font></div> <script type="text/javascript"> document.body.oncopy = function () { setTimeout( function () { var text = clipboardData.getData("text"); if (text) { text = text + "\r\n本篇文章来源于 中国建站之家 原文链接："+location.href; clipboardData.setData("text", text); } }, 100 ) } </script> <br> <a href="javascript:window.open('http://shuqian.qq.com/post?from=3&title='+encodeURIComponent(document.title)+'&uri='+encodeURIComponent(document.location.href)+'&jumpback=2&noui=1','favit','width=930,height=470,left=50,top=50,toolbar=no,menubar=no,location=no,scrollbars=yes,status=yes,resizable=yes');void(0)" style="text-decoration:none;color:#155da5;display:block;background:url('http://shuqian.qq.com/img/add.gif') no-repeat 0px 0px;height:23px;width:300px;padding:2px 2px 0px 20px;font-size:14px;">将本文收藏到QQ书签与更多好友分享</a> <div></div> </td> <table width="575" border="0" cellpadding="0" cellspacing="0"> <tr> </tr> <tr> <td align="right" height=25 bgcolor=#F7F7F7 > <script language=javascript src=/wz/sg.JS></script> [<a href=javascript:window.print()>打 印</a>] </tr> </table> <table width="575" border="0" cellpadding="0" cellspacing="0"> <tr> </tr> <tr> <td align="right" height=25 bgcolor=#F7F7F7 style="display:block;padding:0px 10px"> <font color=#000000>[<script language=JavaScript src="/Article/Hits.Asp?ArticleID=4676"></script>]</font> [<a href="javascript:history.go(-1)">返回上一页</a>] [<a href="/user/favorite.asp?action=add&topic=教你用Javascript制作连续滚动的字幕">收 藏</a>]</td> </tr> <tr> <table width="575" border="0" cellpadding="0" cellspacing="0"> <tr> </tr> <tr> <td style="display:block;padding:0px 10px"><div><font color=#000000>上一篇文章：</font><a href=/Article/13/151/2005/200507204675.html>小试Samba服务器（4）</a></div><div><font color=#000000>下一篇文章：</font><font color=#000000><a href=/Article/10/132/2005/200507204677.html>二、设置开发、运行环境</a></font></div></td> </tr> </table> <table width="575" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="titlebg1">∷相关文章评论∷　　 　（评论内容只代表网友观点，与本站立场无关！） [<a href=/Article/comment.asp?ArticleID=4676 target=_blank>更多评论</a>...]</td> </tr> <tr valign="top"> <td></td> </tr> </table> </td> <td width="188" class="tableleft"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="titleback1">精彩推荐</td> </tr> <tr> <td height="260" valign="center" class="showbody1"><script language=javascript src=/ad/180601.js></script></td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="titleback1">热门文章</td> </tr> <tr> <td height="100" valign="top" class="showbody1"><table width="100%" border="0" cellpadding="2" cellspacing="0"><tr> <td class="showlist11">· <a href='/Article/10/138/2005/200507256912.html' class="showlist" title="注册码大全二">注册码大全二</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/10/138/2005/200507256914.html' class="showlist" title="注册码大全四">注册码大全四</a></td> <td class="showlist12"></td> </tr><tr> <td class="showlist11">· <a href='/Article/10/138/2005/200507256911.html' class="showlist" title="注册码大全一">注册码大全一</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/196/197/2005/2005081911736.html' class="showlist" title="要10G免费网络硬盘的请进来！">要10G免费网络硬盘的请进..</a></td> <td class="showlist12"></td> </tr><tr> <td class="showlist11">· <a href='/Article/206/2007/2007030319347.html' class="showlist" title="通过google 赶快来赚美金">通过google 赶快来赚美金..</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/10/138/2005/200507256919.html' class="showlist" title="注册码大全十">注册码大全十</a></td> <td class="showlist12"></td> </tr><tr> <td class="showlist11">· <a href='/Article/14/253/2005/2005092114218.html' class="showlist" title="头像-qq头像(qq新头像)4">头像-qq头像(qq新头像)4..</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/13/150/2006/2006022316028.html' class="showlist" title="让你轻松架设FTP服务器1">让你轻松架设FTP服务器1..</a></td> <td class="showlist12"></td> </tr><tr> <td class="showlist11">· <a href='/Article/10/138/2005/200507256913.html' class="showlist" title="注册码大全三">注册码大全三</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/14/244/2005/2005092014121.html' class="showlist" title="梦幻背景图片7">梦幻背景图片7</a></td> <td class="showlist12"></td> </tr><tr> <td class="showlist11">· <a href='/Article/14/249/2005/2005092114181.html' class="showlist" title="卡通动物图片6">卡通动物图片6</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/14/269/2005/2005092114241.html' class="showlist" title="网页制作素材-按钮素材2">网页制作素材-按钮素材2..</a></td> <td class="showlist12"></td> </tr><tr> <td class="showlist11">· <a href='/Article/13/150/2006/2006022316032.html' class="showlist" title="让你轻松架设FTP服务器5">让你轻松架设FTP服务器5..</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/14/244/2005/2005092014153.html' class="showlist" title="风景图片8">风景图片8</a></td> <td class="showlist12"></td> </tr><tr> <td class="showlist11">· <a href='/Article/10/138/2005/200507256918.html' class="showlist" title="注册码大全九">注册码大全九</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/13/150/2006/2006022316029.html' class="showlist" title="让你轻松架设FTP服务器2">让你轻松架设FTP服务器2..</a></td> <td class="showlist12"></td> </tr></table></td> </tr> <tr> <td height="2" bgcolor="#FFFFFF"></td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="titleback1">关注此文读者还看过</td> </tr> <tr> <td height="100" valign="top" class="showbody1"><table width="100%" border="0" cellpadding="2" cellspacing="0"><tr> <td class="showlist11">· <a href='/Article/11/139/2005/20050708048.html' target="_blank" class="showlist" title="DW2004 中文乱码解决方案 [1]">DW2004 中文乱码解决方案..</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/10/133/2005/200507309308.html' target="_blank" class="showlist" title="支持oicq头像的留言簿(一)">支持oicq头像的留言簿(一..</a></td> <td class="showlist12"></td> </tr><tr> <td class="showlist11">· <a href='/Article/10/130/2005/20050718663.html' target="_blank" class="showlist" title="COM+运行期的变化">COM+运行期的变化</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/10/131/2005/2005091913800.html' target="_blank" class="showlist" title="ASP.NET程序中动态修改web.config中的设置项目（前台页面代码）">ASP.NET程序中动态修改w..</a></td> <td class="showlist12"></td> </tr><tr> <td class="showlist11">· <a href='/Article/13/149/2007/2007072421028.html' target="_blank" class="showlist" title="详细讲解 Linux操作系统的进程查看方法">详细讲解 Linux操作系统..</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/11/143/2005/200507193171.html' target="_blank" class="showlist" title="美人计Ⅱ——昨晚的工作记录 [5]">美人计Ⅱ——昨晚的工作..</a></td> <td class="showlist12"></td> </tr><tr> <td class="showlist11">· <a href='/Article/10/138/2007/2007082621513.html' target="_blank" class="showlist" title="Web2.0催生的蝴蝶效应 业务敏捷与SOA">Web2.0催生的蝴蝶效应 业..</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/10/133/2005/200507216638.html' target="_blank" class="showlist" title="Tutorial for migrating data from MS Access to MySQL(英文的哦，要有思想准备)">Tutorial for migrating..</a></td> <td class="showlist12"></td> </tr><tr> <td class="showlist11">· <a href='/Article/11/143/2005/200507192870.html' target="_blank" class="showlist" title="Photoshop 创建凹陷按钮 [2]">Photoshop 创建凹陷按钮..</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/11/143/2006/2006011415433.html' target="_blank" class="showlist" title="PhotoShop制作超酷黄金喜字5">PhotoShop制作超酷黄金喜..</a></td> <td class="showlist12"></td> </tr><tr> <td class="showlist11">· <a href='/Article/10/135/2007/2007040319651.html' target="_blank" class="showlist" title="CSS在表格边框上的美学应用">CSS在表格边框上的美学应..</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/10/130/2005/20050718355.html' target="_blank" class="showlist" title="Asp深度揭密（下）">Asp深度揭密（下）</a></td> <td class="showlist12"></td> </tr><tr> <td class="showlist11">· <a href='/Article/11/140/2006/2006070216719.html' target="_blank" class="showlist" title="Flash MX常用快捷键一览2">Flash MX常用快捷键一览..</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/10/133/2005/200507216655.html' target="_blank" class="showlist" title="分页显示Oracle数据库记录的类之一">分页显示Oracle数据库记..</a></td> <td class="showlist12"></td> </tr><tr> <td class="showlist11">· <a href='/Article/11/140/2005/2005081611363.html' target="_blank" class="showlist" title="经典的动画理念：迪士尼名句摘选">经典的动画理念：迪士尼..</a></td> <td class="showlist11"></td> </tr><tr> <td class="showlist12">· <a href='/Article/10/131/2005/2005091512498.html' target="_blank" class="showlist" title="ASP.NET 2.0中的登陆控件简介（2）">ASP.NET 2.0中的登陆控件..</a></td> <td class="showlist12"></td> </tr></table></td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="titleback1">相关文章</td> </tr> <tr> <td height="100" valign="top" class="showbody1"></td> </tr> </table> </td> </tr> </table> <table width="778" border="0" align="center" cellpadding="0" cellspacing="0" class="tableborder"> <tr> <td height="3"></td> </tr> </table> <table width="778" border="0" align="center" cellpadding="0" cellspacing="0" class="tableborder"> <tr> <td height="23" align="right"> <table width="100%" border="0" cellspacing="0" class="tablebody8" cellpadding="0"> <tr> <td height="5"></td> </tr> <tr> <td height="23" align="right" valign="middle"><center><a href="/support/about.asp" class="navmenu2">关于本站</a> - <a href="/support/help.asp" class="navmenu2">网站帮助</a> - <a href="/support/advertise.asp" class="navmenu2">广告合作</a> - <a href="/support/declare.asp" class="navmenu2">下载声明</a> - <a href="/link/" target="_blank" class="navmenu2">友情连接</a> - <a href="/support/sitemap.asp" class="navmenu2">网站地图</a> - <a href="#" target="_blank" class="navmenu2">人才招聘</a> </tr> </table></td> </tr> <tr> <td height="1"></td> </tr> </table> <table width="778" border="0" align="center" cellpadding="0" cellspacing="0" class="tableborder"> <tr> <td height="60" align="center" class="tablebody1">网站合作、内容监督、商务咨询：QQ: 9576619 <br> Copyright ? 2005--2008 中国建站之家版权所有 <br><a href="http://www.miibeian.gov.cn" target="_blank" title="粤ICP备05092265号"><font color=#000000>粤ICP备05092265号 </font><br><script src='http://s6.cnzz.com/stat.php?id=44148&web_id=44148&show=pic' language='JavaScript' charset='gb2312'></script> </td> <script language="javascript" src="/inc/Std_StranJF.Js"></script> </table> </body> </html> <span id="naruco_ad_body" style="display:none;"> <script language=javascript src=/adfile/top.js></script> </span> <script type="text/javascript"> var naruco_ad = document.getElementById('naruco_ad'); if (naruco_ad != null) { naruco_ad.innerHTML=naruco_ad_body.innerHTML; naruco_ad_body.innerHTML=""; } </script>