JS-文字上下滚动（多行停顿）

来源：互联网发布：淘宝快递面单什么意思编辑：程序博客网时间：2024/05/16 14:17
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title></head><body>    <style type="text/css">* { margin:0; padding:0; font-size:12px; }#scrollBox{width:400px;height:40px;line-height:20px;overflow:hidden;margin:10px;}#scrollBox2{width:400px;height:80px;line-height:20px;overflow:hidden;margin:10px;}</style><p> </p><p>每屏两行：</p><div id="scrollBox"><ul>    <li><a href="http://www.cookseo.com/article/web/29.htm" target="_blank">ASP.NET 是.NET FrameWork的一部分</a></li>    <li><a href="http://www.cookseo.com/article/css/126.htm" target="_blank">是一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术</a></li>    <li><a href="http://www.cookseo.com/article/soft/125.htm" target="_blank">是一项微软公司的技术</a></li>    <li><a href="http://www.cookseo.com/article/css/2.htm" target="_blank">ASP.NET 是.NET FrameWork的一部分</a> </li></ul></div><p>每屏四行：</p><div id="scrollBox2"><ul>    <li><a href="http://www.cookseo.com/article/soft/5.htm" target="_blank">ASP.NET 是.NET FrameWork的一部分</a></li>    <li><a href="http://www.cookseo.com/article/css/35.htm" target="_blank">是一项微软公司的技术</a></li>    <li><a href="http://www.cookseo.com/article/web/88.htm" target="_blank">是一项微软公司的技术</a></li>    <li><a href="http://www.cookseo.com/article/css/2.htm" target="_blank">是一项微软公司的技术</a></li>    <li><a href="http://www.cookseo.com/article/soft/71.htm" target="_blank">是一项微软公司的技术</a></li>    <li><a href="http://www.cookseo.com/article/soft/9.htm" target="_blank">是一项微软公司的技术</a></li>    <li><a href="http://www.cookseo.com/article/web/53.htm" target="_blank">是一项微软公司的技术</a></li>    <li><a href="http://www.cookseo.com/article/web/124.htm" target="_blank">是一项微软公司的技术</a></li>    <li><a href="http://www.cookseo.com/article/seo/32.htm" target="_blank">是一项微软公司的技术</a></li>    <li><a href="http://www.cookseo.com/article/web/29.htm" target="_blank">是一项微软公司的技术</a></li>    <li><a href="http://www.cookseo.com/article/css/126.htm" target="_blank">是一项微软公司的技术</a></li>    <li><a href="http://www.cookseo.com/article/soft/125.htm" target="_blank">是一项微软公司的技术</a> </li></ul></div><script type="text/javascript">    function Dron_ScrollBox(uid) {        this.scrollBox = document.getElementById(uid);        this.scrollBoxHeight = this.scrollBox.clientHeight;        this.scrollBoxInner = this.scrollBox.innerHTML;        this.scrollCol = this.scrolln = 0;        this.setScroll = function () {            this.scrollBox.scrollTop = this.scrollCol + this.scrolln;            if (this.scrolln == this.scrollBoxHeight)                return this.addScroll()            else                this.scrolln++;            var o = this;            function m() { o.setScroll(); }            setTimeout(m, 40);        }        this.addScroll = function () {            this.scrollBox.innerHTML += "<br />" + this.scrollBoxInner;            this.scrollCol = this.scrollBox.scrollTop;            this.scrolln = 0;            var o = this;            function m() { o.setScroll(); }            setTimeout(m, 2000);        }        this.init = this.addScroll;    }    //类的调用方法，可多个    new Dron_ScrollBox("scrollBox").init();    new Dron_ScrollBox("scrollBox2").init();</script></body></html>
效果如图：
0 0